/**
*
* PreviewSideBar
*
*/

import PropTypes from 'prop-types';

import React from 'react';
import { CapButton } from '@capillarytech/cap-ui-library';
// import styled from 'styled-components';

import { FormattedMessage } from 'react-intl';
import { Button } from 'antd';
import _ from 'lodash';
import TemplatePreview from '../TemplatePreview';
import SlideBox from '../SlideBox';
import './_previewsidebar.scss';
import messages from './messages';
const ButtonGroup = Button.Group;

class PreviewSideBar extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.goToEdit = this.goToEdit.bind(this);
    this.goToDuplicate = this.goToDuplicate.bind(this);
    this.changeDevice = this.changeDevice.bind(this);
    this.state = {
      device: "android",
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.templateData.versions && nextProps.templateData.versions.base.ANDROID && nextProps.templateData.versions.base.IOS) {
      this.setState({device: 'android'});
    } else if (nextProps.templateData.versions && nextProps.templateData.versions.base.IOS) {
      this.setState({device: 'ios'});
    }
  }
  goToDuplicate() {
    this.props.onDuplicateClick(this.props.templateData);
    this.props.handleClose();
  }
  changeDevice(ev) {
    this.setState({device: ev.target.value});
  }
  goToEdit(e, path) {
    this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
  }
  render() {
    
    let content = '';
    if ((this.props.channel || '').toLowerCase() === 'wechat') {
      
      content = this.props.templateData.content;
    } else if ((this.props.channel || '').toLowerCase() === "mobilepush" && !_.isEmpty(this.props.templateData)) {
      const data = this.state.device === "android" ? this.props.templateData.versions.base.ANDROID : this.props.templateData.versions.base.IOS;
      content = {
        header: data.title,
        bodyText: data.message,
        bodyImage: data.expandableDetails && data.expandableDetails.image,
        actions: [],
        appName: this.props.templateData.appName,
      };
      if (data.expandableDetails && data.expandableDetails.ctas && data.expandableDetails.ctas.length) {
        if (this.state.device === "android" ) {
          content.actions = _.map(data.expandableDetails.ctas, (cta) => ({label: cta.actionText}));
        } else {
          content.actions = [{label: data.expandableDetails.ctas[0].actionLabel}, {label: data.expandableDetails.ctas[0].actionLabel2}];
        }
      }
    } else if ((this.props.channel || '').toLowerCase() === "line") {
      const isMsgReady = (this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base);
      if (isMsgReady) {
        content = {
          bodyText: this.props.templateData.versions.base.content.messages[0].text ? this.props.templateData.versions.base.content.messages[0].text : '',
          bodyImage: this.props.templateData.versions.base.content.messages[0].previewImageUrl ? this.props.templateData.versions.base.content.messages[0].previewImageUrl : '',
        };
      }
    } else {
      content = this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base ? this.props.templateData.versions.base['sms-editor'] : '';
      for (let idx = 2; idx <= 5; idx += 1) {
        if ((content === '' || !content) && this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base && this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base[`sms-editor${idx}`]) {
          content = this.props.templateData.versions.base[`sms-editor${idx}`];
        }
      }
    }
    let path = '';
    if ((this.props.channel || '').toLowerCase() === 'wechat') {
      path = this.props.templateData && this.props.templateData.definition && this.props.templateData.definition.msgcontent === "RICH_MEDIA_WECHAT" ? `/wechat/richmedia/edit/${this.props.templateData._id}` : `/wechat/edit/${this.props.templateData._id}`;
    }
    
    return (
      <SlideBox
        header={this.props.templateData && this.props.templateData.name ? this.props.templateData.name : ''}
        content={
          <div>
            <div className="devices">
              {!_.isEmpty(this.props.templateData) && this.props.templateData.versions.base.ANDROID && this.props.templateData.versions.base.IOS &&
              <ButtonGroup onClick={this.changeDevice}>
                <CapButton type={this.state.device === "android" ? "primary" : "secondary"} value={"android"}>Android</CapButton>
                <CapButton type={this.state.device === "iphone" ? "primary" : "secondary"} value={"iphone"}>IOS</CapButton>
              </ButtonGroup>}
            </div>
            {(this.props.channel || '').toLowerCase() === "mobilepush" ?
              <TemplatePreview
                device={this.state.device === "android" ? "android" : "iphone"}
                channel={this.props.channel}
                content={content || ''}
                templateData={this.props.templateData}
              >
              </TemplatePreview>
              :
              <TemplatePreview
                content={content || ''}
                channel={this.props.channel}
                location={this.props.location}
                charCounterEnabled={(this.props.channel || '').toLowerCase() === 'sms'}
                unicodeEnabled={(this.props.channel || '').toLowerCase() === 'sms'}
                templateData={this.props.templateData}
              >
              </TemplatePreview>
            }
            <hr className="seperator-line" />
            <div className="preview-action-container" style={{margin: '16px'}}>
              {(this.props.channel || '').toLowerCase() === 'sms' && !this.props.embedded && <CapButton onClick={() => this.goToDuplicate()}className="preview-buttons" style={{marginRight: '8px'}} type="secondary"><FormattedMessage {...messages.duplicate} /></CapButton>}
              <CapButton onClick={(e) => this.goToEdit(e, path)} className="preview-buttons" type="primary">{this.props.location.query.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} />}</CapButton>
            </div>
          </div>
        }
        show={this.props.showPreview}
        handleClose={this.props.handleClose}
      >
      </SlideBox>
    );
  }

}

PreviewSideBar.propTypes = {
  templateData: PropTypes.object.isRequired,
  channel: PropTypes.string.isRequired,
  showPreview: PropTypes.bool,
  handleClose: PropTypes.func,
  onEditClick: PropTypes.func,
  onDuplicateClick: PropTypes.func,
  location: PropTypes.object,
  embedded: PropTypes.bool,
};

export default PreviewSideBar;
