/**
*
* EmailPreview
*
*/

import PropTypes from 'prop-types';

import React from 'react';
import styled from 'styled-components';
import get from 'lodash/get';
import { CapTab, CapIcon, CapLabel } from '@capillarytech/cap-ui-library';
import { CAP_G01, CAP_G06, FONT_SIZE_VL } from '@capillarytech/cap-ui-library/styled/variables';
import { FormattedMessage } from 'react-intl';
import moment from "moment";
import messages from "./messages";
import { removeLinksFromHtmlContent } from './../../utils/common';
import './_emailPreview.scss';
import tabletBody from '../../assets/iPad.svg';
import mobileBody from '../../assets/mobile.png';

// this component will be deprecated after replacing with the v2 component.
const deviceAspectRatio = {
  desktop: () => ({
    height: "500",
    width: "1024",
  }),
  tablet: (emailSubject) => ({
    height: emailSubject ? "570" : "600",
    width: "450",
  }),
  mobile: (emailSubject) => ({
    height: emailSubject ? "570" : "600",
    width: "310",
  }),
};

const StyledCapIcon = styled(CapIcon)`
  color: ${(props) => props.active ? CAP_G01 : CAP_G06};
  font-size: ${FONT_SIZE_VL};
`;

class EmailPreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    const { device, content, versions = {} } = this.props;
    const emailSubject = get(versions, 'base.subject', '');
    let messageContainerName = '';
    let subjectClassName = 'email-subject-desktop';
    if (device === 'tablet') {
      messageContainerName = 'tablet-message-container-v2';
      subjectClassName = "email-subject-tablet";
    } else if (device === 'mobile') {
      messageContainerName = 'mobile-message-container-v2';
      subjectClassName = "email-subject-mobile";
    }
    const copyContent = removeLinksFromHtmlContent(content);
    const emailSubjectLabel = emailSubject && (
      <CapLabel className={subjectClassName} type="label2">
        <FormattedMessage {...messages.subject} /> {emailSubject}</CapLabel>
    );
    const iframeDiv = (<div className={`${messageContainerName}`}>
      {emailSubjectLabel}
      <iframe srcDoc={copyContent} {...deviceAspectRatio[device](emailSubject)} >
        <p><FormattedMessage {...messages.browserDoesntSupportIframe} /></p>
      </iframe>
    </div>);
    return (
      <div className={this.props.show ? "modal-emailPreivew-wrapper show-emailPreivew" : "modal-emailPreivew-wrapper hide-emailPreivew"}>
        <div id="emailPreivew-container">
          <div className="emailPreivew-header">
            <div className="heading-title">
              {this.props.header}
            </div>
            <div id="box-actions" style={{ float: 'right' }} onClick={this.props.handleClose}>
              <i className="material-icons close-emailPreivew"><FormattedMessage {...messages.close} /></i>
            </div>
          </div>

          <div id="emailPreivew-content-wrapper">
            <div id="emailPreivew-content">
              <CapTab
                className="email-preview-device-tabs"
                activeKey={this.props.device}
                onChange={this.props.changePreviewDevice}
                panes={[
                  {
                    key: 'desktop',
                    tab: <StyledCapIcon type="desktop" active={device === 'desktop'} />,
                    content: <div className="email-preview-container">
                      {iframeDiv}
                    </div>,
                  },
                  {
                    key: 'tablet',
                    tab: <StyledCapIcon type="tablet" active={device === 'tablet'} />,
                    content: (<div className="email-preview-container">
                      <div className="shell align-center">
                        <img src={tabletBody} alt="capillary" width="520" />
                        {iframeDiv}
                      </div>
                    </div>),
                  },
                  {
                    key: 'mobile',
                    tab: <StyledCapIcon type="mobile" active={device === 'mobile'} />,
                    content: (<div className="email-preview-container">
                      <div className="shell align-center">
                        <img src={mobileBody} alt="capillary" width="350" />
                        {iframeDiv}
                      </div>
                    </div>),
                  },
                ]}
                />
              <div>
                {(this.props.lastModified && this.props.updatedByName) ? <div>
                  <p className="preview-info" style={{ marginBottom: '8px', paddingTop: '8px'}}><FormattedMessage {...messages.lastModified} />: {moment(this.props.lastModified).format('MM-DD-YYYY')}</p>
                  <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.updatedByName}</p>
                </div> : ''}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

EmailPreview.propTypes = {
  header: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.string,
  ]).isRequired,
  content: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
  ]),
  show: PropTypes.bool,
  device: PropTypes.string,
  handleClose: PropTypes.func,
  changePreviewDevice: PropTypes.func,
  lastModified: PropTypes.string,
  updatedByName: PropTypes.string,
  versions: PropTypes.object,
};

export default EmailPreview;
