import React from 'react';
import Checkbox from './common/Checkbox';
import i18n from '../i18n';
import Avatar from './common/Avatar';
import GuildRecord from '../records/GuildRecord';
import UserRecord from '../records/UserRecord';
import GuildSettingsActionCreators from '../actions/GuildSettingsActionCreators';
import ModalActionCreators from '../actions/ModalActionCreators';
import {popLayer} from '../actions/LayerActionCreators';

const TransferOwnershipModal = React.createClass({
  propTypes: {
    guild: React.PropTypes.instanceOf(GuildRecord).isRequired,
    toUser: React.PropTypes.instanceOf(UserRecord).isRequired,
    fromUser: React.PropTypes.instanceOf(UserRecord).isRequired,
  },

  statics: {
    key: () => 'transfer-ownership-modal',
  },

  getInitialState() {
    return {
      acknowledged: false,
    };
  },

  handleTransfer(e) {
    e.preventDefault();

    ModalActionCreators.pop();

    GuildSettingsActionCreators.transferOwnership(this.props.guild.id, this.props.toUser.id)
      .then(() => popLayer())
      .catch(() => {});
  },

  handleAcknowledged(e) {
    this.setState({acknowledged: e.currentTarget.checked});
  },

  render() {
    return (
      <form className="form guild-settings-modal-transfer-ownership" onSubmit={this.handleTransfer}>
        <div className="form-header">
          <header>{i18n.Messages.TRANSFER_OWNERSHIP}—{this.props.toUser.toString()}</header>
        </div>
        <div className="form-inner">
          <div className="from-to">
            <Avatar user={this.props.fromUser} size="xxlarge" />
            <div className="from-to-arrow" />
            <Avatar user={this.props.toUser} size="xxlarge" />
          </div>
          <Checkbox defaultValue={this.state.acknowledged} onChange={this.handleAcknowledged}>
            <span>
              {i18n.Messages.TRANSFER_OWNERSHIP_ACKNOWLEDGE.format({username: this.props.toUser.toString()})}
            </span>
          </Checkbox>
        </div>
        <div className="form-actions">
          <button type="button" className="btn btn-default" onClick={this.props.onClose}>{i18n.Messages.CANCEL}</button>
          <button type="submit" className="btn btn-primary red" disabled={!this.state.acknowledged}>
            {i18n.Messages.TRANSFER_OWNERSHIP}
          </button>
        </div>
      </form>
    );
  },
});

export default TransferOwnershipModal;



// WEBPACK FOOTER //
// ./discord_app/components/TransferOwnershipModal.js