import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Permalink from '../../../components/permalink';
import Avatar from '../../../components/avatar';
import DisplayName from '../../../components/display_name';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { shortNumberFormat } from 'mastodon/utils/numbers';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { NavLink } from 'react-router-dom';

const messages = defineMessages({
  authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
  reject   : { id: 'follow_request.reject', defaultMessage: 'Reject' },
});

export default @injectIntl
class AccountAuthorize extends ImmutablePureComponent {

  static propTypes = {
    account    : ImmutablePropTypes.map.isRequired,
    onAuthorize: PropTypes.func.isRequired,
    onReject   : PropTypes.func.isRequired,
    intl       : PropTypes.object.isRequired,
  };

  render() {
    const { intl, account, onAuthorize, onReject } = this.props;
    const content = { __html: account.get('note_emojified') };

    return (
      <div className='account-authorize__wrapper'>
        <div className='account-authorize'>
          <Permalink
            href={account.get('url')}
            to={`/accounts/${account.get('id')}`}
            className='detailed-status__display-name'
          >
            <div className='account-authorize__avatar'>
              <Avatar
                account={account}
                size={100}
              />

            </div >
            <DisplayName account={account} />

          </Permalink >
          {/*count posts*/}
          <span className='account-authorize--more-data'>
            <NavLink
              isActive={this.isStatusesPageActive}
              activeClassName='active'
              to={`/accounts/${account.get('id')}`}
              title={intl.formatNumber(account.get('statuses_count'))}
            >
              <i className='fa fa-comment' />
              <strong >{shortNumberFormat(account.get('statuses_count'))}</strong > <FormattedMessage
                id='account.posts'
                defaultMessage='Toots'
              />
            </NavLink >

            <NavLink
              exact
              activeClassName='active'
              to={`/accounts/${account.get('id')}/following`}
              title={intl.formatNumber(account.get('following_count'))}
            >
              <strong >{shortNumberFormat(account.get('following_count'))}</strong > <FormattedMessage
                id='account.follows'
                defaultMessage='Follows'
              />
            </NavLink >

            <NavLink
              exact
              activeClassName='active'
              to={`/accounts/${account.get('id')}/followers`}
              title={intl.formatNumber(account.get('followers_count'))}
            >
              <strong >{shortNumberFormat(account.get('followers_count'))}</strong > <FormattedMessage
                id='account.followers'
                defaultMessage='Followers'
              />
            </NavLink >

          </span >

          <div
            className='account__header__content'
            dangerouslySetInnerHTML={content}
          />
        </div >

        <div className='account--panel'>
          <div
            className='account--panel__button account--panel__button__allow clickable'
            onClick={onAuthorize}
          >
            <i
              className='fa fa-check'
              title={intl.formatMessage(messages.authorize)}
            />
            {intl.formatMessage(messages.authorize)}
          </div >
          <div
            className='account--panel__button  account--panel__button__reject clickable'
            onClick={onReject}
          >
            <i
              className='fa fa-times'
              title={intl.formatMessage(messages.reject)}
            />
            {intl.formatMessage(messages.reject)}
          </div >
        </div >
      </div >
    );
  }

}