import React from 'react';
import { connect } from 'react-redux';
import { fetchOwnAccounts } from 'soapbox/actions/auth';
import { throttle } from 'lodash';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
import { isStaff } from 'soapbox/utils/accounts';
import { defineMessages, injectIntl } from 'react-intl';
import { logOut, switchAccount } from 'soapbox/actions/auth';
import { List as ImmutableList } from 'immutable';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';

const messages = defineMessages({
  add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
  logout: { id: 'profile_dropdown.logout', defaultMessage: 'Log out @{acct}' },
});

const mapStateToProps = state => {
  const me = state.get('me');

  const otherAccounts =
    state
      .getIn(['auth', 'users'])
      .keySeq()
      .reduce((list, id) => {
        if (id === me) return list;
        const account = state.getIn(['accounts', id]);
        return account ? list.push(account) : list;
      }, ImmutableList());

  return {
    account: state.getIn(['accounts', me]),
    otherAccounts,
    isStaff: isStaff(state.getIn(['accounts', me])),
  };
};

class ProfileDropdown extends React.PureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired,
    size: PropTypes.number,
    account: ImmutablePropTypes.map,
    otherAccounts: ImmutablePropTypes.list,
    isStaff: PropTypes.bool.isRequired,
  };

  static defaultProps = {
    isStaff: false,
  }

  handleLogOut = e => {
    this.props.dispatch(logOut());
    e.preventDefault();
  };

  handleSwitchAccount = account => {
    return e => {
      this.props.dispatch(switchAccount(account.get('id')));
      e.preventDefault();
    };
  }

  fetchOwnAccounts = throttle(() => {
    this.props.dispatch(fetchOwnAccounts());
  }, 2000);

  componentDidMount() {
    this.fetchOwnAccounts();
  }

  componentDidUpdate() {
    this.fetchOwnAccounts();
  }

  renderAccount = account => {
    return (
      <div className='account'>
        <div className='account__wrapper'>
          <div className='account__display-name' title={account.get('acct')} href={`/@${account.get('acct')}`} to={`/@${account.get('acct')}`}>
            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
            <DisplayName account={account} />
          </div>
        </div>
      </div>
    );
  }

  render() {
    const { intl, account, otherAccounts } = this.props;
    const size = this.props.size || 16;

    let menu = [];

    otherAccounts.forEach(account => {
      menu.push({ text: this.renderAccount(account), action: this.handleSwitchAccount(account) });
    });

    if (otherAccounts.size > 0) {
      menu.push(null);
    }

    menu.push({ text: intl.formatMessage(messages.add), to: '/auth/sign_in' });
    menu.push({ text: intl.formatMessage(messages.logout, { acct: account.get('acct') }), to: '/auth/sign_out', action: this.handleLogOut });

    return (
      <div className='compose__action-bar' style={{ 'marginTop':'-6px' }}>
        <div className='compose__action-bar-dropdown'>
          <DropdownMenuContainer items={menu} icon='chevron-down' size={size} direction='right' />
        </div>
      </div>
    );
  }

}

export default injectIntl(connect(mapStateToProps)(ProfileDropdown));