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

import { FormattedMessage } from 'react-intl';

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

import escapeTextContentForBrowser from 'escape-html';

import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { closeModal } from 'mastodon/actions/modal';
import { IconButton } from 'mastodon/components/icon_button';
import InlineAccount from 'mastodon/components/inline_account';
import MediaAttachments from 'mastodon/components/media_attachments';
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
import { EmojiHTML } from '@/mastodon/components/emoji/html';
import { CustomEmojiProvider } from '@/mastodon/components/emoji/context';

const mapStateToProps = (state, { statusId }) => ({
  language: state.getIn(['statuses', statusId, 'language']),
  versions: state.getIn(['history', statusId, 'items']),
});

const mapDispatchToProps = dispatch => ({

  onClose() {
    dispatch(closeModal({
      modalType: undefined,
      ignoreFocus: false,
    }));
  },

});

class CompareHistoryModal extends PureComponent {

  static propTypes = {
    onClose: PropTypes.func.isRequired,
    index: PropTypes.number.isRequired,
    statusId: PropTypes.string.isRequired,
    language: PropTypes.string.isRequired,
    versions: ImmutablePropTypes.list.isRequired,
  };

  render () {
    const { index, versions, language, onClose } = this.props;
    const currentVersion = versions.get(index);

    const content = currentVersion.get('content');
    const spoilerContent = escapeTextContentForBrowser(currentVersion.get('spoiler_text'));

    const formattedDate = <RelativeTimestamp timestamp={currentVersion.get('created_at')} long />;
    const formattedName = <InlineAccount accountId={currentVersion.get('account')} />;

    const label = currentVersion.get('original') ? (
      <FormattedMessage id='status.history.created' defaultMessage='{name} created {date}' values={{ name: formattedName, date: formattedDate }} />
    ) : (
      <FormattedMessage id='status.history.edited' defaultMessage='{name} edited {date}' values={{ name: formattedName, date: formattedDate }} />
    );

    return (
      <div className='modal-root__modal compare-history-modal'>
        <CustomEmojiProvider emojis={currentVersion.get('emojis')}>
          <div className='report-modal__target'>
            <IconButton className='report-modal__close' icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
            {label}
          </div>

          <div className='compare-history-modal__container'>
            <div className='status__content'>
              {currentVersion.get('spoiler_text').length > 0 && (
                <>
                  <EmojiHTML className='translate' htmlString={spoilerContent} lang={language} />
                  <hr />
                </>
              )}

              <EmojiHTML
                className='status__content__text status__content__text--visible translate'
                htmlString={content}
                lang={language}
              />

              {!!currentVersion.get('poll') && (
                <div className='poll'>
                  <ul>
                    {currentVersion.getIn(['poll', 'options']).map(option => (
                      <li key={option.get('title')}>
                        <label className='poll__option editable'>
                          {/* FIXME: does not support multiple choice, #35632 */}
                          <span className='poll__input' />
                          <EmojiHTML
                            as="span"
                            className='poll__option__text translate'
                            htmlString={escapeTextContentForBrowser(option.get('title'))}
                            lang={language}
                          />
                        </label>
                      </li>
                    ))}
                  </ul>
                </div>
              )}

              <MediaAttachments status={currentVersion} lang={language} />
            </div>
          </div>
        </CustomEmojiProvider>
      </div>
    );
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(CompareHistoryModal);
