import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import lodash from 'lodash';
import classNames from 'classnames';
import Flux from '../lib/flux';
import WindowStore from '../stores/WindowStore';
import SelectedGuildStore from '../stores/SelectedGuildStore';
import NicknameUtils from '../utils/NicknameUtils';
import ChannelRecord from '../records/ChannelRecord';
import UserStore from '../stores/UserStore';
import TypingStore from '../stores/TypingStore';
import RelationshipStore from '../stores/RelationshipStore';
import i18n from '../i18n';
import Spinner from './common/Spinner';
import '../styles/typing.styl';

const TypingUsers = React.createClass({
  mixins: [Flux.StoreListenerMixin(TypingStore, WindowStore, SelectedGuildStore), PureRenderMixin],

  propTypes: {
    channel: React.PropTypes.instanceOf(ChannelRecord),
  },

  getStateFromStores() {
    return {
      typingUsers: TypingStore.getTypingUsers(this.props.channel.id),
      isFocused: WindowStore.isFocused(),
      guildId: SelectedGuildStore.getGuildId(),
    };
  },

  componentWillReceiveProps(nextProps) {
    this.setState({
      typingUsers: TypingStore.getTypingUsers(nextProps.channel.id),
    });
  },

  render() {
    const {guildId} = this.state;
    const currentUser = UserStore.getCurrentUser();
    const typingUsers = lodash(this.state.typingUsers)
      .keys()
      .filter(uid => uid != currentUser.id)
      .reject(RelationshipStore.isBlocked)
      .map(uid => UserStore.getUser(uid))
      .filter(user => user != null)
      .map(user => NicknameUtils.getName(guildId, this.props.channel.id, user))
      .value();

    if (typingUsers.length == 0) {
      return null;
    }

    const [a, b, c] = typingUsers;

    let typingText;
    if (typingUsers.length === 1) {
      typingText = i18n.Messages.ONE_USER_TYPING.format({a});
    } else if (typingUsers.length === 2) {
      typingText = i18n.Messages.TWO_USERS_TYPING.format({a, b});
    } else if (typingUsers.length === 3) {
      typingText = i18n.Messages.THREE_USERS_TYPING.format({a, b, c});
    } else {
      typingText = i18n.Messages.SEVERAL_USERS_TYPING;
    }

    return (
      <div className={classNames('typing', {'stop-animation': !this.state.isFocused})}>
        <Spinner type="pulsing-ellipsis" className="ellipsis" />
        <span className="text">{typingText}</span>
      </div>
    );
  },
});

export default TypingUsers;



// WEBPACK FOOTER //
// ./discord_app/components/TypingUsers.js