/**
*
* CallTaskPreview
*
*/

import React from 'react';
import PropTypes from 'prop-types';
import HeaderPng from './images/Header.png';
import FooterPng from './images/Footer.png';
import WhatsAppPng from './images/Whatsapp.png';

import './_callTaskPreview.scss';

const STOREMAX_WHATSAPP = 'STOREMAX_WHATSAPP';
class CallTaskPreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    const { subject, messageBody, callTaskActionType } = this.props;
    return (
      <div className="call-task-preview">
        <img className={`call-task-image-${callTaskActionType}`} src={callTaskActionType === STOREMAX_WHATSAPP ? WhatsAppPng : HeaderPng} alt="header" />
        {callTaskActionType !== STOREMAX_WHATSAPP && <div className={`call-task-subject-container-${callTaskActionType}`}>
          {subject}
        </div>}
        <div className={`call-task-message-container-${callTaskActionType}`}>
          {messageBody}
        </div>
        {callTaskActionType !== STOREMAX_WHATSAPP && <img style={{ width: '100%' }} src={FooterPng} alt="footer" />}
      </div>
    );
  }
}

CallTaskPreview.propTypes = {
  subject: PropTypes.string,
  messageBody: PropTypes.string,
  callTaskActionType: PropTypes.string,
};

export default CallTaskPreview;
