import PropTypes from 'prop-types';
import { PureComponent } from 'react';

import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';

import { makeGetStatus } from 'flavours/glitch/selectors';

import { Avatar } from './avatar';
import { DisplayName } from './display_name';
import StatusContent from './status_content';
import Permalink from './permalink';

const makeMapStateToProps = () => {
  const getStatus = makeGetStatus();

  const mapStateToProps = (state, { statusId }) => ({
    status: getStatus(state, { id: statusId }),
  });

  return mapStateToProps;
};

class QuotedStatus extends PureComponent {

  static propTypes = {
    statusId: PropTypes.string.isRequired,
    status: ImmutablePropTypes.map,
  };

  render () {
    const { status } = this.props;

    if (!status) {
      return (
        <div className='quoted-status quoted-status--unavailable'>
          <p>This post is unavailable.</p>
        </div>
      );
    }

    const account = status.get('account');

    return (
      <div className='quoted-status'>
        <div className='quoted-status__header'>
          <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='quoted-status__account'>
            <Avatar account={account} size={18} />
            <DisplayName account={account} />
          </Permalink>
        </div>
        <StatusContent
          status={status}
          expanded
          collapsible={false}
        />
      </div>
    );
  }

}

export default connect(makeMapStateToProps)(QuotedStatus);