/* @flow */

import React from 'react';
import Flux from '../../lib/flux';
import FormSection from '../../uikit/form/FormSection';
import FormText, {Types as FormTextTypes} from '../../uikit/form/FormText';
import Button, {ButtonLooks, ButtonColors} from '../../uikit/Button';
import GuildSettingsStore from '../../stores/GuildSettingsStore';
import UserStore from '../../stores/UserStore';
import UserSettingsModalActionCreators from '../../actions/UserSettingsModalActionCreators';
import GuildSettingsActionCreators from '../../actions/GuildSettingsActionCreators';
import i18n from '../../i18n';
import type UserRecord from '../../records/UserRecord';
import type GuildRecord from '../../records/GuildRecord';
import {MFALevels, UserSettingsSections} from '../../Constants';

type Props = {
  currentUser: UserRecord,
  guild: GuildRecord,
  mfaLevel: number,
};

class MFASettings extends React.PureComponent {
  props: Props;

  constructor(props) {
    super(props);

    (this: any).setMFAEnabled = this.setMFAEnabled.bind(this);
    (this: any).handleEnableMFA = this.handleEnableMFA.bind(this);
    (this: any).handleDisableMFA = this.handleDisableMFA.bind(this);
  }

  renderEnableButton() {
    const {currentUser, guild} = this.props;
    const canChangeMFALevel = currentUser.mfaEnabled && guild.isOwnerWithRequiredMfaLevel(currentUser);

    return (
      <Button
        disabled={!canChangeMFALevel}
        look={ButtonLooks.OUTLINED}
        color={ButtonColors.PRIMARY}
        onClick={this.handleEnableMFA}>
        {i18n.Messages.GUILD_SECURITY_REQ_MFA_GUILD_ENABLE}
      </Button>
    );
  }

  renderDisableButton() {
    const {currentUser, guild} = this.props;
    const canChangeMFALevel = currentUser.mfaEnabled && guild.isOwnerWithRequiredMfaLevel(currentUser);

    return (
      <Button
        disabled={!canChangeMFALevel}
        look={ButtonLooks.OUTLINED}
        color={ButtonColors.RED}
        onClick={this.handleDisableMFA}>
        {i18n.Messages.GUILD_SECURITY_REQ_MFA_GUILD_DISABLE}
      </Button>
    );
  }

  render() {
    const {currentUser, mfaLevel} = this.props;

    return (
      <FormSection className="guild-settings-security" title={i18n.Messages.GUILD_SECURITY_REQ_MFA_LABEL}>
        <FormText type={FormTextTypes.DESCRIPTION} className="margin-bottom-20">
          {i18n.Messages.GUILD_SECURITY_REQ_MFA_BODY.format()}
          {' '}
          {!currentUser.mfaEnabled
            ? i18n.Messages.GUILD_SECURITY_REQ_MFA_ENABLE.format({onClick: this.openUserAccountModal})
            : null}
        </FormText>
        {mfaLevel === MFALevels.ELEVATED ? this.renderDisableButton() : this.renderEnableButton()}
      </FormSection>
    );
  }

  setMFAEnabled(enable: boolean) {
    const {guild} = this.props;

    GuildSettingsActionCreators.updateMFALevel({
      guildId: guild.id,
      level: enable ? MFALevels.ELEVATED : MFALevels.NONE,
      isEnabled: !enable,
    });
  }

  handleEnableMFA() {
    this.setMFAEnabled(true);
  }

  handleDisableMFA() {
    this.setMFAEnabled(false);
  }

  openUserAccountModal() {
    UserSettingsModalActionCreators.open(UserSettingsSections.ACCOUNT);
  }
}

export default Flux.connectStores([UserStore, GuildSettingsStore], () => {
  const {mfaLevel, guild} = GuildSettingsStore.getProps();

  return {
    currentUser: UserStore.getCurrentUser(),
    mfaLevel,
    guild,
  };
})(MFASettings);



// WEBPACK FOOTER //
// ./discord_app/components/guild_settings/MFASettings.js