/**
*
* WechatRichmediaTemplatePreview
*
*/

import React from 'react';
import PropTypes from 'prop-types';
// import { connect } from 'react-redux';
import { CapRow, CapColumn, CapButton, CapHeading, CapLabel, CapTab, CapIcon, CapImage } from '@capillarytech/cap-ui-library';
import { FormattedMessage } from 'react-intl';
import _ from 'lodash';
import './_wechatRichmediaTemplatePrev.scss';
import messages from './messages';
const wechatBody = require('./../assets/images/wechat_mobile_android.svg');
const wechatLockScreenAndroid = require('./../assets/images/wechat-home-screen-android.svg');
const wechatLockScreenIos = require('./../assets/images/home-screen-ios.svg');
class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  preparePreviewData = (mediaList) => {
    const previewMsg = [];
    const content = JSON.parse(JSON.stringify(mediaList));
    const mediaListLength = content.length;
    const contentData = content[0];
    previewMsg.push(
      <div className="richmedia-image-container">
        <CapImage alt="default" width="100%" height="102px" src={contentData.image_url} />
        {mediaListLength !== 1 && (
          <div className="name-container">
            <CapHeading type="h4" style={{color: "white"}}>{contentData.title}</CapHeading>
          </div>
        )}
      </div>
    );
    if (mediaListLength === 1) {
      previewMsg.push(
        <div className="name-container-with-abstract">
          <CapHeading type="h4">{contentData.title}</CapHeading>
          <CapLabel type="label9">{contentData.digest}</CapLabel>
        </div>
      );
    }
    content.splice(1, 2).forEach((data) => {
      previewMsg.push(
        <div className="additional-richmedia-container">
          <div><CapLabel type="label9" style={{width: '170px', top: '12px', position: 'relative'}}>{data.title}</CapLabel></div>
          <CapImage alt="default" width="34px" height="34px" src={data.image_url} />
        </div>
      );
    });
    return (
      <div className="richmedia-template">
        {previewMsg}
      </div>
    );
  }
  prepareCardLayoutPreviewData = (mediaList) => {
    const returnObj = [];
    _.forEach(mediaList, (contentData, contentIndex) => {
      const id = parseInt(contentIndex, 10);
      if (id === 0) {
        returnObj.push(
          <div style={{ width: "100%", height: 116, position: "relative" }}>
            <CapRow useLegacy>
              <CapImage alt="default" width="100%" height="110px" src={contentData.image_url} />
              <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "10%", width: "auto" }}>{contentData.title ? contentData.title : ""}</div>
            </CapRow>
            {Object.keys(mediaList).length === 1 ?
              <CapRow useLegacy style={{ height: 32, left: "12%" }}>
                {contentData.digest ? contentData.digest : ""}
              </CapRow>
              :
              ""
            }
          </div>
        );
      } else {
        returnObj.push(
          <CapRow style={{ "width": "100%", "height": 64, "border-bottom": "0.5px solid lightgrey", "padding": "0 8px" }}>
            <CapColumn className="preview-overflow-wrap-fields" style={{ padding: "5% 0% 0% 8%", float: "left", width: "auto" }}>
              {contentData.title}
            </CapColumn>
            <CapColumn style={{ float: "right" }}>
              <CapImage alt="default" width="60px" height="60px" src={contentData.image_url}/>
            </CapColumn>
          </CapRow>
        );
      }
    });
    return returnObj;
  }
  goToEdit(e, path) {
    this.props.onEditClick(e, this.props.templateId, this.props.modeType, path);
  }
  getWechatRichMediaAndroidPreview = (content) => (
    <div className="preview-container">
      <div className="shell-lock-screen-android align-center">
        <div className="lock-screen-preview">
          <CapImage className="preview-image" src={wechatLockScreenAndroid} alt="Preview is being generated"/>
          <div className="wechat-android-sender-id">
            Muji India
          </div>
          <div className="wechat-android-title">
            {content[0].title}
          </div>
          <div className="wechat-android-action-buttons">
          <FormattedMessage {...messages.MarkAsRead} /> <FormattedMessage {...messages.reply} />
          </div>
        </div>
        <div className="main-screen-preview">
          <CapImage className="preview-image" src={wechatBody} alt="Preview is being generated"/>
          <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
            <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
              {this.preparePreviewData(content)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  getWechatRIchMediaIosPreview = (content) => (
    <div className="preview-container">
      <div className="shell-lock-screen-android align-center">
        <div className="lock-screen-preview">
          <CapImage className="preview-image" src={wechatLockScreenIos} alt="Preview is being generated"/>
          <div className="wechat-ios-sender-id">
            Muji India
          </div>
          <div className="wechat-ios-title">
            {content[0].title}
          </div>
          <div className="wechat-ios-action-reply">
          <FormattedMessage {...messages.reply} />
          </div>
          <div className="wechat-ios-action-cancel">
          <FormattedMessage {...messages.cancel} />
          </div>
        </div>
        <div className="main-screen-preview">
          <CapImage className="preview-image" src={wechatBody} alt="Preview is being generated"/>
          <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
            <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
              {this.preparePreviewData(content)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  getContentForSlidebox = (content) => {
    return (
      !this.props.showLockScreenPreview ? (
        <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
          <div className="shell align-center" id="sms-preview">
            <CapImage className="preview-image" src={wechatBody} alt="Preview is being generated"/>
            <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
              <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
                {this.preparePreviewData(this.props.content)}
              </div>
            </div>
          </div>
          {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
        </div>
      ) : (
        <CapTab
          panes={[
            {
              content: this.getWechatRichMediaAndroidPreview(this.props.content),
              tab: <CapIcon type="android" size='m' />,
              key: 'android',
            },
            {
              content: this.getWechatRIchMediaIosPreview(this.props.content),
              tab: <CapIcon type="ios" size='m' />,
              key: 'ios',
            },
          ]}
          tabBarStyle={{margin: 'auto', width: '14%'}}
        />
      )
    );
  };

  render() {
    return (
      <div>
        {this.props.contentForSlideBox ?
          this.getContentForSlidebox(this.props.content)
        :
          <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
            <div className="shell align-center" id="sms-preview">
              <div className="wechatMsgContainerCardLayout">
                <div>{this.prepareCardLayoutPreviewData(this.props.content)}
                </div>
              </div>
            </div>
          </div>}
      </div>
    );
  }
}

WechatRichmediaTemplatePreview.propTypes = {
  contentForSlideBox: PropTypes.bool,
  type: PropTypes.string,
  content: PropTypes.array,
  onEditClick: PropTypes.func,
  showEdit: PropTypes.bool,
  path: PropTypes.string,
  templateId: PropTypes.string,
  modeType: PropTypes.string,
};

export default WechatRichmediaTemplatePreview;
// export default connect(null, null)(WechatRichmediaTemplatePreview);