content: import React from 'react';
  import PropTypes from 'prop-types';
  import ImmutablePureComponent from 'react-immutable-pure-component';
  import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
  import api from 'mastodon/api';
  import IconButton from 'mastodon/components/icon_button';
  
  const messages = defineMessages({
    close: { id: 'lightbox.close', defaultMessage: 'Close' },
  });
  
  export default @injectIntl
  class EmbedModal extends ImmutablePureComponent {
  
    static propTypes = {
      url: PropTypes.string.isRequired,
      onClose: PropTypes.func.isRequired,
      onError: PropTypes.func.isRequired,
      intl: PropTypes.object.isRequired,
    }
  
    state = {
      loading: false,
      oembed: null,
    };
  
    componentDidMount () {
      const { url } = this.props;
  
      this.setState({ loading: true });
  
      api().post('/api/web/embed', { url }).then(res => {
        this.setState({ loading: false, oembed: res.data });
  
        const iframeDocument = this.iframe.contentWindow.document;
  
        iframeDocument.open();
        iframeDocument.write(res.data.html);
        iframeDocument.close();
  
        iframeDocument.body.style.margin = 0;
        this.iframe.width  = iframeDocument.body.scrollWidth;
        this.iframe.height = iframeDocument.body.scrollHeight;
      }).catch(error => {
        this.props.onError(error);
      });
    }
  
    setIframeRef = c =>  {
      this.iframe = c;
    }
  
    handleTextareaClick = (e) => {
      e.target.select();
    }
  
    render () {
      const { intl, onClose } = this.props;
      const { oembed } = this.state;
  
      return (
        <div className='modal-root__modal report-modal embed-modal'>
          <div className='report-modal__target'>
            <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
            <FormattedMessage id='status.embed' defaultMessage='Embed' />
          </div>
  
          <div className='report-modal__container embed-modal__container' style={{ display: 'block' }}>
            <p className='hint'>
              <FormattedMessage id='embed.instructions' defaultMessage='Embed this status on your website by copying the code below.' />
            </p>
  
            <input
              type='text'
              className='embed-modal__html'
              readOnly
              value={oembed && oembed.html || ''}
              onClick={this.handleTextareaClick}
            />
  
            <p className='hint'>
              <FormattedMessage id='embed.preview' defaultMessage='Here is what it will look like:' />
            </p>
  
            <iframe
              className='embed-modal__iframe'
              frameBorder='0'
              ref={this.setIframeRef}
              sandbox='allow-same-origin'
              title='preview'
            />
          </div>
        </div>
      );
    }
  
  }
  