import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Flux from '../lib/flux';
import lodash from 'lodash';
import NoticeStore from '../stores/NoticeStore';
import ChannelStore from '../stores/ChannelStore';
import UserStore from '../stores/UserStore';
import SelectedChannelStore from '../stores/SelectedChannelStore';
import {
  UserSettingsSections,
  DetectedPlatformAccountsDisplayTypes,
  NoticeTypes,
  CreateGuildModalScreens,
} from '../Constants';
import ModalActionCreators from '../actions/ModalActionCreators';
import NoticeActionCreators from '../actions/NoticeActionCreators';
import StatusPageActionCreators from '../actions/StatusPageActionCreators';
import UserSettingsModalActionCreators from '../actions/UserSettingsModalActionCreators';
import SelectedChannelActionCreators from '../actions/SelectedChannelActionCreators';
import CreateGuildModalActionCreators from '../actions/CreateGuildModalActionCreators';
import StreamerModeActionCreators from '../actions/StreamerModeActionCreators';
import PlatformAccountsActionCreators from '../actions/PlatformAccountsActionCreators';
import HelpdeskUtils from '../utils/HelpdeskUtils';
import DownloadApps from './DownloadApps';
import DownloadMobileAppsModal from './DownloadMobileAppsModal';
import Platforms from '../lib/Platforms';
import i18n from '../i18n';
import '../styles/notice.styl';
import DisableSilence from './warnings/DisableSilence';

const Notice = React.createClass({
  mixins: [Flux.StoreListenerMixin(NoticeStore, UserStore), PureRenderMixin],

  getStateFromStores() {
    const notice = NoticeStore.getNotice();
    return {
      currentUser: UserStore.getCurrentUser(),
      ...notice,
    };
  },

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

  handleDownload() {
    ModalActionCreators.push(DownloadApps, {source: 'Top Bar Nag'});
  },

  handleClaimAccount() {
    UserSettingsModalActionCreators.open(UserSettingsSections.ACCOUNT);
  },

  handleDismiss() {
    NoticeActionCreators.dismiss();
  },

  handleIgnorePlatformAccounts() {
    this.handleDismiss();
    PlatformAccountsActionCreators.ignore();
  },

  handleDismissSilenceWarning() {
    this.handleDismiss();
    ModalActionCreators.push(DisableSilence);
  },

  handleDismissVoiceDisconnected() {
    const channelId = SelectedChannelStore.getVoiceChannelId();
    if (channelId != null) {
      SelectedChannelActionCreators.clearVoiceChannel();
    }
    this.handleDismiss();
  },

  handleVoiceReconnect() {
    const channelId = SelectedChannelStore.getVoiceChannelId();
    if (channelId != null) {
      const channel = ChannelStore.getChannel(channelId);
      if (channel != null) {
        SelectedChannelActionCreators.selectVoiceChannel(channel['guild_id'], channelId);
      }
    }
  },

  handleDismissScheduledMaintenance() {
    StatusPageActionCreators.ackScheduledMaintenance();
  },

  handleDisableStreamerMode() {
    StreamerModeActionCreators.setEnabled(false);
  },

  handleOpenAuthorizedApps() {
    UserSettingsModalActionCreators.open(UserSettingsSections.AUTHORIZED_APPS);
  },

  handleShowDetectedAccounts() {
    PlatformAccountsActionCreators.changeDisplayType(DetectedPlatformAccountsDisplayTypes.MODAL);
  },

  handleCreateServer() {
    CreateGuildModalActionCreators.open(CreateGuildModalScreens.CreateGuild, 'Notice');
  },

  handleLaunchSurvey() {
    window.open('https://www.surveymonkey.com/r/6CCXTPS', '_blank');
    this.handleDismiss();
  },

  handleOpenDownloadMobileApps() {
    this.handleDismiss();
    ModalActionCreators.push(DownloadMobileAppsModal);
  },

  render() {
    switch (this.state.type) {
      case NoticeTypes.GENERIC:
        return (
          <div className="notice">
            <div className="notice-dismiss" onClick={this.handleDismiss} />
            {this.state.message}
            <button className="btn" onClick={this.state.callback}>{this.state.buttonText}</button>
          </div>
        );
      case NoticeTypes.VOICE_DISABLED:
        return (
          <div className="notice">
            <div className="notice-dismiss" onClick={this.handleDismissVoiceDisconnected} />
            {i18n.Messages.NOTICE_CONNECTION_CONFLICT}
            <button className="btn" onClick={this.handleVoiceReconnect}>{i18n.Messages.RECONNECT}</button>
          </div>
        );
      case NoticeTypes.UNCLAIMED_ACCOUNT:
        return (
          <div className="notice">
            {i18n.Messages.NOTICE_UNCLAIMED_ACCOUNT}
            <button className="btn" onClick={this.handleClaimAccount}>{i18n.Messages.CLAIM_ACCOUNT}</button>
          </div>
        );
      case NoticeTypes.DOWNLOAD_NAG:
        return (
          <div className="notice">
            <div className="notice-dismiss" onClick={this.handleDismiss} />
            {i18n.Messages.NOTICE_NATIVE_APPS}
            <i className="icon icon-apple" />
            <i className="icon icon-android" />
            <i className="icon icon-windows" />
            <button className="btn" onClick={this.handleDownload}>{i18n.Messages.DOWNLOAD}</button>
          </div>
        );
      case NoticeTypes.SCHEDULED_MAINTENANCE:
        return (
          <div className="notice notice-info">
            <div className="notice-dismiss" onClick={this.handleDismissScheduledMaintenance} />
            {i18n.Messages.NOTICE_SCHEDULED_MAINTENANCE.format(this.state.metadata)}
            <a className="btn" href={`//status.discordapp.com/incidents/${this.state.metadata.id}`} target="_blank">
              {i18n.Messages.LEARN_MORE}
            </a>
          </div>
        );
      case NoticeTypes.NO_INPUT_DETECTED:
        return (
          <div className="notice notice-danger">
            <div className="notice-dismiss" onClick={this.handleDismissSilenceWarning} />
            {i18n.Messages.NOTICE_NO_INPUT_DETECTED}
            <a className="btn" href={HelpdeskUtils.getArticleURL(214925018)} target="_blank">
              {i18n.Messages.NOTICE_NO_INPUT_DETECTED_HELP_LINK_TEXT}
            </a>
          </div>
        );
      case NoticeTypes.STREAMER_MODE:
        return (
          <div className="notice notice-streamer-mode">
            <div className="notice-dismiss" onClick={this.handleDismiss} />
            {i18n.Messages.NOTICE_STREAMER_MODE_TEXT}
            <button className="btn" onClick={this.handleDisableStreamerMode}>{i18n.Messages.DISABLE}</button>
          </div>
        );
      case NoticeTypes.RPC_CONNECTIONS:
        return (
          <div className="notice notice-info">
            <div className="notice-dismiss" onClick={this.handleDismiss} />
            {i18n.Messages.NOTICE_RPC_CONNECTIONS_TEXT.format(this.state.metadata)}
            <button className="btn" onClick={this.handleOpenAuthorizedApps}>{i18n.Messages.AUTHORIZED_APPS}</button>
          </div>
        );
      case NoticeTypes.DETECTED_PLATFORM_ACCOUNTS:
        const platforms = lodash.uniq(this.state.metadata.map(account => Platforms.get(account.type)));

        const platformNames = platforms.map(platform => platform.name);
        const [a, b, c] = platformNames;
        let body;
        if (platformNames.length === 1) {
          body = i18n.Messages.NOTICE_ONE_PLATFORM_ACCOUNT.format({a});
        } else if (platformNames.length === 2) {
          body = i18n.Messages.NOTICE_TWO_PLATFORM_ACCOUNTS.format({a, b});
        } else if (platformNames.length === 3) {
          body = i18n.Messages.NOTICE_THREE_PLATFORM_ACCOUNTS.format({a, b, c});
        } else {
          body = i18n.Messages.NOTICE_FOUR_OR_MORE_PLATFORM_ACCOUNTS.format({a, b, c});
        }

        return (
          <div className="notice notice-brand">
            <div className="notice-dismiss" onClick={this.handleIgnorePlatformAccounts} />
            {platforms.map(platform => <img key={platform.type} className="platform-icon" src={platform.icon.color} />)}
            {body}
            <button className="btn" onClick={this.handleShowDetectedAccounts}>{i18n.Messages.SETUP}</button>
          </div>
        );
      case NoticeTypes.DOWNLOAD_MOBILE_APPS:
        return (
          <div className="notice notice-success">
            {i18n.Messages.NOTICE_DOWNLOAD_MOBILE_APPS}
            <i className="icon icon-apple" />
            <i className="icon icon-android" />
            <button className="btn" onClick={this.handleOpenDownloadMobileApps}>{i18n.Messages.LEARN_MORE}</button>
            <div className="notice-dismiss" onClick={this.handleDismiss} />
          </div>
        );
      case NoticeTypes.SURVEY:
        return (
          <div className="notice notice-info">
            <div className="notice-dismiss" onClick={this.handleDismiss} />
            {i18n.Messages.NOTICE_SURVEY_PROMPT}
            <button className="btn" onClick={this.handleLaunchSurvey}>
              {i18n.Messages.NOTICE_SURVEY_BUTTON}
            </button>
          </div>
        );
      case NoticeTypes.CORRUPT_INSTALLATION:
        return (
          <div className="notice notice-danger">
            {i18n.Messages.NOTICE_CORRUPT_INSTALLATION}
            <a className="btn" href={HelpdeskUtils.getArticleURL(115004307527)} target="_blank">
              {i18n.Messages.NOTICE_CORRUPT_INSTALLATION_HELP_LINK_TEXT}
            </a>
          </div>
        );
      default:
        return null;
    }
  },
});

export default Notice;



// WEBPACK FOOTER //
// ./discord_app/components/Notice.js