import React from 'react';
import lodash from 'lodash';
import Platforms from '../lib/Platforms';
import DetectedPlatformAccountsStore from '../stores/DetectedPlatformAccountsStore';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Switch from './common/Switch';
import RouterUtils from '../utils/RouterUtils';
import FriendsActionCreators from '../actions/FriendsActionCreators';
import PlatformAccountsActionCreators from '../actions/PlatformAccountsActionCreators';
import ConnectedAccountsActionCreators from '../actions/ConnectedAccountsActionCreators';
import i18n from '../i18n';
import {Routes, FriendsSections} from '../Constants';
import Backdrop from './common/Backdrop';
import HelpdeskUtils from '../utils/HelpdeskUtils';
import '../styles/detected_platform_accounts_modal.styl';

const DetectedPlatformAccount = ({account, platform, connect, onToggle}) =>
  <div className="detected-account">
    <img className="detected-account-icon" src={platform.icon.color} />
    <div className="detected-account-details">
      <h3>{account.name}</h3>
      <h4>{i18n.Messages.NUM_FRIENDS.format({friendCount: account.friendIdHashes.length})}</h4>
    </div>
    <Switch checked={connect} onChange={e => onToggle(account.id, e.currentTarget.checked)} />
  </div>;

const DetectedPlatformAccountsModal = React.createClass({
  mixins: [PureRenderMixin],

  statics: {
    modalConfig: {
      store: DetectedPlatformAccountsStore,
      backdropStyle: Backdrop.SOLID,
      closable: false,
    },
  },

  getInitialState() {
    return {
      noConnect: new Set(),
    };
  },

  close() {
    PlatformAccountsActionCreators.ignore();
  },

  handleEnable() {
    const {detectedAccounts, analyticsLocation} = this.props;
    const {noConnect} = this.state;

    const platformTypes = new Set();
    detectedAccounts.forEach(account => {
      if (noConnect.has(account.id)) {
        platformTypes.add(account.type);
      } else {
        ConnectedAccountsActionCreators.connect(account.type, account.id, account.name, analyticsLocation);
      }
    });

    RouterUtils.transitionTo(Routes.FRIENDS);
    FriendsActionCreators.setSection(FriendsSections.ADD_FRIEND);

    PlatformAccountsActionCreators.ignore(Array.from(platformTypes));
  },

  handleToggle(accountId, connect) {
    const {noConnect} = this.state;
    if (connect && noConnect.has(accountId)) {
      noConnect.delete(accountId);
      this.forceUpdate();
    } else if (!connect && !noConnect.has(accountId)) {
      noConnect.add(accountId);
      this.forceUpdate();
    }
  },

  render() {
    const {detectedAccounts} = this.props;
    const {noConnect} = this.state;

    const icons = lodash(detectedAccounts)
      .map(account => Platforms.get(account.type))
      .uniq()
      .map(platform => <img key={platform.type} className="icon" src={platform.icon.color} />)
      .value();

    const backgroundImage = require(`../images/platforms/img_account_sync_stars${icons.length}.svg`);

    let body;
    const platformNames = lodash.uniq(detectedAccounts.map(account => Platforms.get(account.type).name));
    const [a, b, c] = platformNames;
    switch (platformNames.length) {
      case 1:
        body = i18n.Messages.ONE_PLATFORM_ACCOUNT_DETECTED.format({a});
        break;
      case 2:
        body = i18n.Messages.TWO_PLATFORM_ACCOUNTS_DETECTED.format({a, b});
        break;
      case 3:
        body = i18n.Messages.THREE_PLATFORM_ACCOUNTS_DETECTED.format({a, b, c});
        break;
      default:
        body = i18n.Messages.FOUR_OR_MORE_PLATFORM_ACCOUNTS_DETECTED;
        break;
    }

    const accounts = detectedAccounts.map(account =>
      <DetectedPlatformAccount
        key={account.id}
        account={account}
        platform={Platforms.get(account.type)}
        connect={!noConnect.has(account.id)}
        onToggle={this.handleToggle}
      />
    );

    return (
      <div className="detected-platform-accounts-modal">
        <div className="icons" style={{backgroundImage: `url(${backgroundImage})`}}>{icons}</div>
        <div className="body">{body}</div>
        <div className="detected-accounts">{accounts}</div>
        <div className="divider" />
        <div className="btn-group">
          <button type="button" className="btn btn-default" onClick={this.close}>
            {i18n.Messages.NOT_NOW}
          </button>
          <button
            type="button"
            className="btn btn-primary"
            onClick={this.handleEnable}
            disabled={detectedAccounts.length - noConnect.size === 0}>
            {i18n.Messages.ENABLE}
          </button>
        </div>
        <div className="privacy">
          {i18n.Messages.PLATFORM_ACCOUNT_PRIVACY.format({articleURL: HelpdeskUtils.getArticleURL(226430028)})}
        </div>
      </div>
    );
  },
});

export default DetectedPlatformAccountsModal;



// WEBPACK FOOTER //
// ./discord_app/components/DetectedPlatformAccountsModal.js