/* @flow */

import React from 'react';
import Flux from '../../lib/flux';
import lodash from 'lodash';
import OverlayStore from '../../stores/OverlayStore';
import KeybindsStore from '../../stores/KeybindsStore';
import OverlayActionCreators from '../../actions/OverlayActionCreators';
import KeybindsActionCreators from '../../actions/KeybindsActionCreators';
import HelpdeskUtils from '../../utils/HelpdeskUtils';
import FormNotice from '../../uikit/form/FormNotice';
import FormSection from '../../uikit/form/FormSection';
import FormTitle, {Tags} from '../../uikit/form/FormTitle';
import Flex from '../../uikit/Flex';
import FormItem from '../../uikit/form/FormItem';
import SwitchItem from '../../uikit/SwitchItem';
import KeyRecorder from '../common/KeyRecorder';
import RadioGroup from '../../uikit/RadioGroup';
import i18n from '../../i18n';
import {
  OverlayDisplayNames,
  OverlayDisplayUsers,
  OverlayAvatarSizes,
  KeybindCustomActions as KeybindActions,
} from '../../Constants';

function getCurrentInputLockKeybind() {
  return lodash.find(KeybindsStore.getKeybinds(), keybind => {
    return keybind.managed === true && keybind.action === KeybindActions.TOGGLE_OVERLAY_INPUT_LOCK;
  });
}

class UserSettingsOverlay extends React.PureComponent {
  constructor(props) {
    super(props);
    lodash.bindAll(this, [
      'handleChangeEnabled',
      'handleChangeDisplayNameMode',
      'handleChangeAvatarSizeMode',
      'handleChangeDisplayUserMode',
      'handleInputLockShortcutChange',
    ]);
  }

  handleChangeEnabled(e) {
    OverlayActionCreators.setEnabled(e.currentTarget.checked);
  }

  handleChangeDisplayNameMode({value}) {
    OverlayActionCreators.setDisplayNameMode(value);
  }

  handleChangeAvatarSizeMode({value}) {
    OverlayActionCreators.setAvatarSizeMode(value);
  }

  handleChangeDisplayUserMode({value}) {
    OverlayActionCreators.setDisplayUserMode(value);
  }

  handleInputLockShortcutChange(shortcut) {
    KeybindsActionCreators.setKeybind({...this.props.inputLockKeybind, shortcut});
  }

  renderExplanation() {
    return (
      <FormNotice
        type={FormNotice.Types.WARNING}
        className="margin-bottom-20 padded"
        body={i18n.Messages.OVERLAY_EXPLANATION.format({supportURL: HelpdeskUtils.getArticleURL(217659737)})}
      />
    );
  }

  renderOverlayToggle() {
    const {enabled, available, progress, inputLockKeybind} = this.props;

    let overlayProgressNote;
    if (enabled && !available && progress < 1) {
      const percent = (progress * 100) | 0;
      const note = i18n.Messages.OVERLAY_DOWNLOAD_PROGRESS.format({percent});
      overlayProgressNote = <span className="overlay-updating-note">{note}</span>;
    }
    return (
      <Flex className="margin-bottom-20">
        <Flex.Child basis="50%">
          <FormItem>
            <FormTitle tag={Tags.H5}>
              {i18n.Messages.SETTINGS_GAMES_ENABLE_OVERLAY_LABEL}
              {overlayProgressNote}
            </FormTitle>
            <SwitchItem
              className="margin-bottom-20"
              style={{marginTop: 16}}
              value={enabled}
              hideBorder
              onChange={this.handleChangeEnabled}>
              {i18n.Messages.ENABLE_INGAME_OVERLAY}
            </SwitchItem>
          </FormItem>
        </Flex.Child>
        <Flex.Child basis="50%">
          <FormItem title={i18n.Messages.KEYBIND_TOGGLE_OVERLAY_INPUT_LOCK}>
            <KeyRecorder
              disabled={!enabled}
              defaultValue={inputLockKeybind != null ? inputLockKeybind.shortcut : ''}
              onChange={this.handleInputLockShortcutChange}
            />
          </FormItem>
        </Flex.Child>
      </Flex>
    );
  }

  renderAvatarSize() {
    return (
      <Flex className="margin-bottom-20">
        <Flex.Child>
          <FormItem title={i18n.Messages.FORM_LABEL_AVATAR_SIZE}>
            <RadioGroup
              options={[
                {
                  name: i18n.Messages.AVATAR_SIZE_OPTION_LARGE,
                  value: OverlayAvatarSizes.LARGE,
                },
                {
                  name: i18n.Messages.AVATAR_SIZE_OPTION_SMALL,
                  value: OverlayAvatarSizes.SMALL,
                },
              ]}
              onChange={this.handleChangeAvatarSizeMode}
              value={this.props.avatarSizeMode}
            />
          </FormItem>
        </Flex.Child>
      </Flex>
    );
  }

  renderDisplayNames() {
    return (
      <Flex className="margin-bottom-20">
        <Flex.Child>
          <FormItem title={i18n.Messages.FORM_LABEL_DISPLAY_NAMES}>
            <RadioGroup
              options={[
                {
                  name: i18n.Messages.DISPLAY_OPTION_ALWAYS,
                  value: OverlayDisplayNames.ALWAYS,
                },
                {
                  name: i18n.Messages.DISPLAY_OPTION_ONLY_WHILE_SPEAKING,
                  value: OverlayDisplayNames.ONLY_WHILE_SPEAKING,
                },
                {
                  name: i18n.Messages.DISPLAY_OPTION_NEVER,
                  value: OverlayDisplayNames.NEVER,
                },
              ]}
              onChange={this.handleChangeDisplayNameMode}
              value={this.props.displayNameMode}
            />
          </FormItem>
        </Flex.Child>
      </Flex>
    );
  }

  renderDisplayUsers() {
    return (
      <Flex>
        <Flex.Child>
          <FormItem title={i18n.Messages.FORM_LABEL_DISPLAY_USERS}>
            <RadioGroup
              options={[
                {
                  name: i18n.Messages.DISPLAY_OPTION_ALWAYS,
                  value: OverlayDisplayUsers.ALWAYS,
                },
                {
                  name: i18n.Messages.DISPLAY_OPTION_ONLY_WHILE_SPEAKING,
                  value: OverlayDisplayUsers.ONLY_WHILE_SPEAKING,
                },
              ]}
              onChange={this.handleChangeDisplayUserMode}
              value={this.props.displayUserMode}
            />
          </FormItem>
        </Flex.Child>
      </Flex>
    );
  }

  render() {
    return (
      <FormSection tag={Tags.H2} title={i18n.Messages.OVERLAY}>
        {this.renderExplanation()}
        {this.renderOverlayToggle()}
        {this.renderAvatarSize()}
        {this.renderDisplayNames()}
        {this.renderDisplayUsers()}
      </FormSection>
    );
  }
}

export default Flux.connectStores([OverlayStore, KeybindsStore], () => ({
  enabled: OverlayStore.enabled,
  available: OverlayStore.isAvailable,
  progress: OverlayStore.installProgress,
  avatarSizeMode: OverlayStore.getAvatarSizeMode(),
  displayNameMode: OverlayStore.getDisplayNameMode(),
  displayUserMode: OverlayStore.getDisplayUserMode(),
  inputLockKeybind: getCurrentInputLockKeybind(),
}))(UserSettingsOverlay);



// WEBPACK FOOTER //
// ./discord_app/components/user_settings/UserSettingsOverlay.js