import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Select from 'react-select';
import classNames from 'classnames';
import Flux from '../lib/flux';
import AnalyticsUtils from '../utils/AnalyticsUtils';
import InstantInviteUtils from '../utils/InstantInviteUtils';
import InstantInviteStore from '../stores/InstantInviteStore';
import StreamerModeStore from '../stores/StreamerModeStore';
import InstantInviteActionCreators from '../actions/InstantInviteActionCreators';
import InstantInvite from './InstantInvite';
import Spinner from './common/Spinner';
import Checkbox from './common/Checkbox';
import SaveButton from './common/SaveButton';
import HelpButton from './common/HelpButton';
import Countdown from './common/Countdown';
import i18n from '../i18n';
import '../styles/instant_invite_popout.styl';
import '../styles/popout.styl';

const LOCATION = 'Instant Invite Popout';
const MAX_AGE_REF = 'max_age';
const MAX_USES_REF = 'max_uses';
const TEMPORARY_REF = 'temporary';

const MAX_AGE_OPTIONS = InstantInviteUtils.getMaxAgeOptions;
const MAX_USES_OPTIONS = InstantInviteUtils.getMaxUsesOptions;

const InstantInvitePopout = React.createClass({
  mixins: [Flux.StoreListenerMixin(InstantInviteStore, StreamerModeStore), PureRenderMixin],

  propTypes: {
    channel: React.PropTypes.object.isRequired,
    source: React.PropTypes.string,
  },

  getDefaultProps() {
    return {
      source: null,
    };
  },

  getInitialState() {
    return {
      advanced: false,
      [MAX_AGE_REF]: MAX_AGE_OPTIONS[1].value,
      [MAX_USES_REF]: MAX_USES_OPTIONS[0].value,
      [TEMPORARY_REF]: false,
    };
  },

  getStateFromStores() {
    return {
      invite: InstantInviteStore.getInvite(this.props.channel.id),
      hide: StreamerModeStore.hideInstantInvites,
    };
  },

  componentDidMount() {
    const validate = this.state.invite ? this.state.invite.code : null;
    InstantInviteActionCreators.createInvite(this.props.channel.id, {validate}, 'InstantInvitePopout Mount');

    let {source} = this.props;
    if (source != null) {
      if (window.inviteButtonSource) {
        source = window.inviteButtonSource;
        window.inviteButtonSource = undefined;
      }

      AnalyticsUtils.track('open_popout', {
        Type: 'Instant Invite',
        Source: source,
      });
    }
  },

  handleRegenerate() {
    const regenerate = this.state.invite ? this.state.invite.code : null;
    InstantInviteActionCreators.createInvite(this.props.channel.id, {regenerate}, 'InstantInvitePopout Regenerate');
  },

  handleShowAdvanced(e) {
    e.preventDefault();
    e.stopPropagation();
    this.setState({advanced: true});
  },

  handleHideAdvanced(e) {
    e.preventDefault();
    e.stopPropagation();
    this.setState({advanced: false});
  },

  handleSubmit(e) {
    e.preventDefault();
    InstantInviteActionCreators.createInvite(
      this.props.channel.id,
      {
        [MAX_AGE_REF]: parseInt(this.state[MAX_AGE_REF], 10),
        [MAX_USES_REF]: parseInt(this.state[MAX_USES_REF], 10),
        [TEMPORARY_REF]: this.state[TEMPORARY_REF],
      },
      'InstantInvitePopout'
    );
    this.setState({advanced: false});
  },

  handleMaxAgeChange(maxAge) {
    this.setState({[MAX_AGE_REF]: maxAge});
  },

  handleMaxUsesChange(maxUses) {
    this.setState({[MAX_USES_REF]: maxUses});
  },

  handleTemporaryChange(e) {
    this.setState({[TEMPORARY_REF]: e.currentTarget.checked});
  },

  renderBasic() {
    const {invite, hide} = this.state;
    let instantInvite;
    let countdown;
    if (invite == null) {
      instantInvite = <Spinner />;
    } else {
      instantInvite = <InstantInvite hidden={hide} code={invite.code} location={LOCATION} />;
      countdown = <Countdown deadline={invite.getExpiresAt()} />;
    }

    return (
      <section>
        <p>{i18n.Messages.INSTANT_INVITE_POPOUT}</p>
        <div className="instant-invite">
          {instantInvite}
        </div>
        <div className="actions">
          {countdown}
          <a onClick={this.handleRegenerate}>{i18n.Messages.INSTANT_INVITE_REGENERATE}</a>
        </div>
        <hr />
        <a onClick={this.handleShowAdvanced}>{i18n.Messages.ADVANCED_SETTINGS}</a>
      </section>
    );
  },

  renderAdvanced() {
    return (
      <section>
        <form className="form" onSubmit={this.handleSubmit}>
          <div className="control-groups">
            <div className={classNames({'control-group': true, error: false})}>
              <label htmlFor="settings-email">{i18n.Messages.FORM_LABEL_MAX_AGE}</label>
              <Select
                value={this.state[MAX_AGE_REF]}
                ref={MAX_AGE_REF}
                clearable={false}
                searchable={false}
                options={MAX_AGE_OPTIONS}
                onChange={this.handleMaxAgeChange}
              />
            </div>
            <div className={classNames({'control-group': true, error: false})}>
              <label htmlFor="settings-email">{i18n.Messages.FORM_LABEL_MAX_USES}</label>
              <Select
                value={this.state[MAX_USES_REF]}
                ref={MAX_USES_REF}
                clearable={false}
                searchable={false}
                onChange={this.handleMaxUsesChange}
                options={MAX_USES_OPTIONS}
              />
            </div>
          </div>
          <div className={classNames({'control-group': true, error: false})}>
            <ul className="checkbox-group">
              <li>
                <Checkbox
                  defaultChecked={this.state[TEMPORARY_REF]}
                  ref={TEMPORARY_REF}
                  onChange={this.handleTemporaryChange}>
                  {i18n.Messages.FORM_LABEL_TEMPORARY}
                  <HelpButton text={i18n.Messages.FORM_HELP_TEMPORARY} />
                </Checkbox>
              </li>
            </ul>
          </div>
          <SaveButton className="btn btn-primary">{i18n.Messages.INSTANT_INVITE_GENERATE}</SaveButton>
        </form>
        <hr />
        <a onClick={this.handleHideAdvanced}>{i18n.Messages.CANCEL}</a>
      </section>
    );
  },

  render() {
    return (
      <div className="instant-invite-popout" {...this.props}>
        <header>{i18n.Messages.INSTANT_INVITE}</header>
        {this.state.advanced ? this.renderAdvanced() : this.renderBasic()}
      </div>
    );
  },
});

export default InstantInvitePopout;



// WEBPACK FOOTER //
// ./discord_app/components/InstantInvitePopout.js