/**
*
* EmailPreviewV2
*
*/

import React from 'react';
// import styled from 'styled-components';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import {isEmpty} from 'lodash';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { createStructuredSelector } from 'reselect';
import { CapSpin, CapButton, CapLabel } from '@capillarytech/cap-ui-library';
import moment from 'moment';
import EmailPreviewV2 from '../EmailPreviewV2';
import messages from '../EmailPreviewV2/messages';
import './index.scss';
import mobileBody from '../../assets/DeviceForEmail.png';
import { iframePreviewAdjustWidth, removeLinksFromHtmlContent } from './../../utils/common';
import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
import * as templateActions from '../../v2Containers/Templates/actions';

const deviceAspectRatio = {
  mobile: {
    height: "541",
    width: "340",
  },
};

class EmailMobilePreview extends React.Component {
  static getDerivedStateFromProps(props) {
    if (props.showAllDevices) {
      return {
        showAllDevices: true,
      };
    }
    return null;
  }
  constructor() {
    super();
    this.state = {
      showAllDevices: false,
    };
  }
  componentWillMount() {
    const {templateData, templateContent} = this.props;
    if (isEmpty(templateContent) && !isEmpty(templateData) && templateData._id) { // templateData: comes from templates list email preview
      this.props.templateActions.getTemplateDetails(templateData._id); // templateContent: html data to be shown in iframe
    }
  }
  onClickShowInAllDevices = () => {
    const { onClickShowInAllDevices } = this.props;
    if (onClickShowInAllDevices) {
      onClickShowInAllDevices();
    } else {
      this.setState({
        showAllDevices: true,
      });
    }
  }
  render() {
    const messageContainerName = 'mobile-message-container';
    const {
      templateContent,
      enableShowAllDevices,
      templateSubject,
    } = this.props;
    const copyContent = templateContent && removeLinksFromHtmlContent(templateContent);
    const updateCopyContent = templateContent && iframePreviewAdjustWidth(copyContent);

    const { showAllDevices } = this.state;

    const emailSubjectLabel = templateSubject && (
      <CapLabel className="email-subject-mobile" type="label2">
        <FormattedMessage {...messages.subject} /> {templateSubject}</CapLabel>
    );

    return (
      <div className="email-mobile-preview-container">
        {showAllDevices ? (
          <EmailPreviewV2 {...this.props} />
        ) : (
          <CapSpin spinning={!templateContent}>
            <div id="emailPreivew-container">
              <div id="emailPreivew-content-wrapper">
                <div id="emailPreivew-content">
                  <div className="email-preview-container">
                    {enableShowAllDevices && (
                      <CapButton
                        type="flat"
                        onClick={this.onClickShowInAllDevices}
                      >
                        View in all devices
                      </CapButton>
                      )}
                    <div className={"shell align-center"}>

                      <img src={mobileBody} alt="capillary" width="386" />
                      <div className={`${messageContainerName} ${emailSubjectLabel ? 'with-subject' : ''}`}>
                        {emailSubjectLabel}
                        <iframe srcDoc={updateCopyContent} {...deviceAspectRatio.mobile} >
                          <p><FormattedMessage {...messages.noIframeSupport}/></p>
                        </iframe>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {this.props.templateData &&
              [
                <p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
                <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
              ]
            }
          </CapSpin>
        )}
      </div>

    );
  }

}

EmailMobilePreview.propTypes = {
  templateContent: PropTypes.string,
  templateSubject: PropTypes.string,
  templateData: PropTypes.object,
  templateActions: PropTypes.object,
  onClickShowInAllDevices: PropTypes.func,
  enableShowAllDevices: PropTypes.bool,
};

EmailMobilePreview.defaultProps = {
  showDeviceSelection: true,
  showAllDevices: false,
};

const mapStateToProps = (state, props) => createStructuredSelector({
  templateContent: props.templateData ? selectTemplateContent() : () => props.templateContent, // when props has templateContent that means preview with content
});
function mapDispatchToProps(dispatch) {
  return {
    templateActions: bindActionCreators(templateActions, dispatch),
  };
}

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