/* @flow */

import React from 'react';
import Flux from '../../lib/flux';
import i18n from '../../i18n';
import lodash from 'lodash';

import GuildIconUploader from '../common/GuildIconUploader';
import AvatarUploader from '../common/AvatarUploader';
import {RegionSelectModal} from '../common/RegionSelect';
import ImageInput from '../common/ImageInput';

import ChannelStore from '../../stores/ChannelStore';
import GuildSettingsStore from '../../stores/GuildSettingsStore';
import PermissionStore from '../../stores/PermissionStore';
import RegionStore from '../../stores/RegionStore';

import GuildSettingsActionCreators from '../../actions/GuildSettingsActionCreators';
import RegionActionCreators from '../../actions/RegionActionCreators';
import ModalActionCreators from '../../actions/ModalActionCreators';

import TextInput from '../../uikit/TextInput';
import FormItem from '../../uikit/form/FormItem';
import FormSection from '../../uikit/form/FormSection';
import FormTitle, {Tags} from '../../uikit/form/FormTitle';
import Flex from '../../uikit/Flex';
import FormText, {Types} from '../../uikit/form/FormText';
import FormDivider from '../../uikit/form/FormDivider';
import Button, {ButtonLooks, ButtonColors} from '../../uikit/Button';
import SettingsNotice from '../common/SettingsNotice';
import Select from '../../uikit/Select';
import RadioGroup from '../../uikit/RadioGroup';
import RegionSelector from '../../uikit/RegionSelector';

import AvatarUtils from '../../utils/AvatarUtils';
import type GuildRecord from '../../records/GuildRecord';
import {SPLASH_SIZE, ChannelTypes, UserNotificationSettings, GuildFeatures, Permissions} from '../../Constants';
import '../../styles/guild_settings_overview.styl';

import type ChannelRecord from '../../records/ChannelRecord';

type Region = {
  name: string,
  deprecated: boolean,
  custom: boolean,
  vip: boolean,
  optimal: boolean,
  id: string,
};

type Props = {
  submitting: boolean,
  region: Region,
  regions: Array<Region>,
  errors: {[key: string]: string},
  guild: GuildRecord,
  canManageGuild: boolean,
  channels: Array<ChannelRecord>,
};

const NO_AFK_CHANNEL_SENTINEL = 'NO_AFK_CHANNEL';
const TIMEOUT_1_MIN = `${60}`;
const TIMEOUT_5_MIN = `${60 * 5}`;
const TIMEOUT_15_MIN = `${60 * 15}`;
const TIMEOUT_30_MIN = `${60 * 30}`;
const TIMEOUT_1_HR = `${60 * 60}`;

export const GuildSettingsOverviewNotice = Flux.connectStores([GuildSettingsStore], () => {
  const {guild, submitting} = GuildSettingsStore.getProps();
  return {
    guild,
    submitting,
    onReset() {
      GuildSettingsActionCreators.init(guild.id);
    },
    onSave() {
      GuildSettingsActionCreators.saveGuild(guild.id, {
        name: guild.name,
        region: guild.region,
        icon: guild.icon,
        splash: guild.splash,
        afkChannelId: guild.afkChannelId,
        afkTimeout: guild.afkTimeout,
        verificationLevel: guild.verificationLevel,
        defaultMessageNotifications: guild.defaultMessageNotifications,
        explicitContentFilter: guild.explicitContentFilter,
      });
    },
  };
})(SettingsNotice);

class GuildSettingsOverview extends React.PureComponent {
  props: Props;

  constructor(props: Props) {
    super(props);
    lodash.bindAll(this, [
      'handleNameChange',
      'handleIconChange',
      'handleAFKChannelChange',
      'handleAFKTimeoutChange',
      'handleDefaultMessageNotificationsChange',
      'handleSplashChange',
      'handleRegionSelectorClick',
      'handleRegionChange',
    ]);
  }

  componentDidMount() {
    if (this.props.regions == null) {
      RegionActionCreators.fetchRegions(this.props.guild.id);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.guild.id !== nextProps.guild.id) {
      const regions = RegionStore.getRegions(nextProps.guild.id);
      if (regions == null) {
        RegionActionCreators.fetchRegions(nextProps.guild.id);
      }
    }
  }

  handleNameChange(name) {
    GuildSettingsActionCreators.updateGuild({name});
  }

  handleIconChange(icon) {
    GuildSettingsActionCreators.updateGuild({icon});
  }

  handleAFKChannelChange({value: afkChannelId}) {
    if (afkChannelId === NO_AFK_CHANNEL_SENTINEL) {
      afkChannelId = null;
    }
    GuildSettingsActionCreators.updateGuild({afkChannelId});
  }

  handleAFKTimeoutChange({value: afkTimeout}) {
    GuildSettingsActionCreators.updateGuild({afkTimeout: parseInt(afkTimeout, 10)});
  }

  handleDefaultMessageNotificationsChange({value: defaultMessageNotifications}) {
    GuildSettingsActionCreators.updateGuild({defaultMessageNotifications});
  }

  handleSplashChange(splash) {
    GuildSettingsActionCreators.updateGuild({splash});
  }

  handleRegionChange({id}) {
    GuildSettingsActionCreators.updateGuild({region: id});
  }

  handleRegionSelectorClick() {
    const {regions} = this.props;
    if (regions == null) {
      return;
    }
    const selectableRegions = regions.filter(region => !region.deprecated);
    ModalActionCreators.push(props =>
      <RegionSelectModal regions={selectableRegions} onChange={this.handleRegionChange} {...props} />
    );
  }

  renderBaseSettings() {
    const {guild, region, regions, errors, canManageGuild} = this.props;
    const regionDisabled = regions == null || regions.length == 0;

    return (
      <Flex className="guild-settings-base-section margin-bottom-40">
        <Flex basis="50%" justify={Flex.Justify.BETWEEN}>
          <Flex.Child wrap>
            <GuildIconUploader
              showIcon
              name={guild.name}
              icon={guild.icon}
              onChange={this.handleIconChange}
              disabled={!canManageGuild}
              makeURL={icon => icon && AvatarUtils.getGuildIconURL({id: guild.id, icon})}
            />
          </Flex.Child>
          <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.START} style={{maxWidth: 180}}>
            <FormText type={Types.DESCRIPTION} className="margin-bottom-8">
              {i18n.Messages.GUILD_SETTINGS_ICON_RECOMMEND}
            </FormText>
            <Button
              look={ButtonLooks.OUTLINED}
              color={ButtonColors.WHITE}
              disabled={!canManageGuild}
              className="margin-top-8">
              {i18n.Messages.UPLOAD_IMAGE}
              <ImageInput onChange={this.handleIconChange} disabled={!canManageGuild} />
            </Button>
          </Flex>
        </Flex>
        <Flex.Child basis="50%">
          <FormItem title={i18n.Messages.FORM_LABEL_SERVER_NAME} className="margin-bottom-20">
            <TextInput
              type="text"
              disabled={!canManageGuild}
              value={guild.name}
              maxLength={100}
              onChange={this.handleNameChange}
              error={errors['name']}
            />
          </FormItem>
          <FormItem title={i18n.Messages.FORM_LABEL_SERVER_REGION}>
            <RegionSelector
              disabled={!canManageGuild || regionDisabled}
              region={region}
              onClick={this.handleRegionSelectorClick}
              error={errors['region'] != null ? true : false}
            />
          </FormItem>
        </Flex.Child>
      </Flex>
    );
  }

  renderAFKSection() {
    const {guild, canManageGuild, channels} = this.props;
    const afkTimeout = guild.afkTimeout != null ? `${guild.afkTimeout}` : null;
    const afkChannelId = guild.afkChannelId || NO_AFK_CHANNEL_SENTINEL;
    const afkTimeouts = [
      {value: TIMEOUT_1_MIN, label: i18n.Messages.DURATION_MINUTES.format({minutes: 1})},
      {value: TIMEOUT_5_MIN, label: i18n.Messages.DURATION_MINUTES.format({minutes: 5})},
      {value: TIMEOUT_15_MIN, label: i18n.Messages.DURATION_MINUTES.format({minutes: 15})},
      {value: TIMEOUT_30_MIN, label: i18n.Messages.DURATION_MINUTES.format({minutes: 30})},
      {value: TIMEOUT_1_HR, label: i18n.Messages.DURATION_HOURS.format({hours: 1})},
    ];
    const channelsOptions = lodash(channels)
      .filter(channel => channel['guild_id'] === guild.id)
      .filter(channel => channel.type === ChannelTypes.GUILD_VOICE)
      .map(channel => {
        return {
          value: channel.id,
          label: channel.toString(),
        };
      })
      .value();
    channelsOptions.unshift({value: NO_AFK_CHANNEL_SENTINEL, label: i18n.Messages.NO_AFK_CHANNEL});

    return (
      <FormSection className="margin-bottom-40">
        <Flex>
          <Flex.Child>
            <FormItem title={i18n.Messages.FORM_LABEL_AFK_CHANNEL}>
              <Select
                value={afkChannelId}
                clearable={false}
                searchable={false}
                options={channelsOptions}
                disabled={!canManageGuild}
                onChange={this.handleAFKChannelChange}
              />
            </FormItem>
          </Flex.Child>
          <Flex.Child>
            <FormItem title={i18n.Messages.FORM_LABEL_AFK_TIMEOUT}>
              <Select
                value={afkTimeout}
                clearable={false}
                searchable={false}
                options={afkTimeouts}
                disabled={afkChannelId === NO_AFK_CHANNEL_SENTINEL || !canManageGuild}
                onChange={this.handleAFKTimeoutChange}
              />
            </FormItem>
          </Flex.Child>
        </Flex>
        <FormText className="margin-top-8" type={Types.DESCRIPTION}>
          {i18n.Messages.FORM_HELP_AFK_CHANNEL}
        </FormText>
      </FormSection>
    );
  }

  renderNotificationSection() {
    const {guild, canManageGuild} = this.props;
    const options = [
      {
        name: i18n.Messages.FORM_LABEL_ALL_MESSAGES,
        value: UserNotificationSettings.ALL_MESSAGES,
      },
      {
        name: i18n.Messages.FORM_LABEL_ONLY_MENTIONS.format(),
        value: UserNotificationSettings.ONLY_MENTIONS,
      },
    ];
    return (
      <FormSection className="margin-bottom-40">
        <FormTitle>{i18n.Messages.FORM_LABEL_DEFAULT_NOTIFICATION_SETTINGS}</FormTitle>
        <FormText type={Types.DESCRIPTION} className="margin-bottom-20">
          {i18n.Messages.GUILD_SETTINGS_DEFAULT_NOTIFICATION_SETTINGS_INTRO}
        </FormText>
        <FormText type={Types.DESCRIPTION} className="margin-bottom-20">
          {i18n.Messages.GUILD_SETTINGS_DEFAULT_NOTIFICATION_SETTINGS_PROTIP.format({
            videoURL: 'https://www.youtube.com/watch?v=zGl796352RI',
          })}
        </FormText>
        <RadioGroup
          options={options}
          value={guild.defaultMessageNotifications}
          disabled={!canManageGuild}
          onChange={this.handleDefaultMessageNotificationsChange}
        />
      </FormSection>
    );
  }

  renderServerInviteBGSection() {
    const {guild, canManageGuild} = this.props;

    return (
      <FormSection
        title={i18n.Messages.GUILD_SETTINGS_SERVER_INVITE_BACKGROUND}
        className="guild-settings-splash-section">
        <Flex>
          <Flex basis="50%" direction={Flex.Direction.VERTICAL} align={Flex.Align.START}>
            <FormText type={Types.DESCRIPTION} className="margin-bottom-8">
              {i18n.Messages.GUILD_SETTINGS_SPLASH_RECOMMEND}
            </FormText>
            <Button look={ButtonLooks.OUTLINED} color={ButtonColors.WHITE} className="margin-top-8">
              {i18n.Messages.UPLOAD_BACKGROUND}
              <ImageInput onChange={this.handleSplashChange} />
            </Button>
          </Flex>
          <Flex.Child wrap basis="50%">
            <AvatarUploader
              avatar={guild.splash}
              size={SPLASH_SIZE}
              makeURL={splash => splash && AvatarUtils.getGuildSplashURL({id: guild.id, splash})}
              disabled={!canManageGuild}
              onChange={this.handleSplashChange}
              hint={i18n.Messages.CHANGE_SPLASH}
            />
          </Flex.Child>
        </Flex>
      </FormSection>
    );
  }

  render() {
    const hasSplash = this.props.guild.hasFeature(GuildFeatures.INVITE_SPLASH);

    return (
      <FormSection title={i18n.Messages.SERVER_OVERVIEW} tag={Tags.H2}>
        {this.renderBaseSettings()}
        <FormDivider className="margin-bottom-40" />
        {this.renderAFKSection()}
        <FormDivider className="margin-bottom-40" />
        {this.renderNotificationSection()}
        {hasSplash && <FormDivider className="margin-top-40 margin-bottom-20" />}
        {hasSplash && this.renderServerInviteBGSection()}
      </FormSection>
    );
  }
}

export default Flux.connectStores([ChannelStore, GuildSettingsStore, PermissionStore, RegionStore], () => {
  const {guild, errors, submitting} = GuildSettingsStore.getProps();
  const regions = RegionStore.getRegions(guild.id);
  let region = {
    id: 'unknown',
    name: i18n.Messages.UNKNOWN_REGION,
    vip: false,
  };
  if (regions != null) {
    region = regions.find(region => region.id === guild.region) || region;
  }

  const permissions = PermissionStore.getGuildPermissions(guild.id) || 0;
  const canManageGuild = (permissions & Permissions.MANAGE_GUILD) === Permissions.MANAGE_GUILD;

  return {
    channels: ChannelStore.getChannels(),
    canManageGuild,
    regions,
    region,
    guild,
    errors,
    submitting,
  };
})(GuildSettingsOverview);



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