/*
 *
 * MobilepushWrapper
 *
 */
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
import {CapRadioCard, CapLabel} from '@capillarytech/cap-ui-library';
import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
import styled from 'styled-components';
import { CAP_SPACE_04, CAP_SPACE_08 } from '@capillarytech/cap-ui-library/styled/variables';
// import MobilepushCreate from '../MobilePush/Create';
import MapTemplate from '../MapTemplates';
import RichMediaCreate from '../RichmediaTemplates/Create';
import RichMediaEdit from '../RichmediaTemplates/Edit';
import WechatRichmediaTemplatePreview from '../../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
import TemplatePreview from '../../../v2Components/TemplatePreview';
import mapTemplateImage from "../../../assets/mapTemplate.png";
import richMediaImage from "../../../assets/richMedia.png";
import {
    CREATE,
    RICH_MEDIA,
    MAP_TEMPLATE,
    PREVIEW,
    EDIT,
} from './constants';
import { getCommonProps } from '../helper';
import messages from './messages';
import './_wrapper.scss';

const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
const CardContainer = styled.div`
  margin-top: 16px;
  .component-with-label-label{
    margin-bottom: unset;
  }
  .ant-radio-group{
    .ant-radio-button-wrapper{
      &:first-child{
        margin-left: unset;
      }
    }
    
  }
`;
export class Wrapper extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.modes = [
      {
        title: <FormattedMessage {...messages.mapTemplate}/>,
        content: (
          <>
            <CapLabel type="label1" style={{ paddingTop: CAP_SPACE_04, paddingBottom: CAP_SPACE_08 }}>
              {props.intl.formatMessage(messages.mapTemplateSubtext)}
            </CapLabel>
            <img alt="" className="template-image" src={mapTemplateImage} />
          </>
        ),
        value: MAP_TEMPLATE,
      },
      {
        title: <FormattedMessage {...messages.richMedia}/>,
        content: (
          <>
            <CapLabel type="label1" style={{ paddingTop: CAP_SPACE_04, paddingBottom: CAP_SPACE_08 }}>
              {props.intl.formatMessage(messages.richMediaSubtext)}
            </CapLabel>
            <img alt="" className="template-image" src={richMediaImage} />
          </>
        ),
        value: RICH_MEDIA,
      },
    ];
    this.state = {
      templateName: "",
    };
  }
  onChange = (e) => {
    this.props.onWechatTemplateChange( e.target.value );
  };
  getCreateContent() {
    let { templateType } = this.props;
    const { templateStep, query, selectedWeChatAccount } = this.props;
    if (templateStep !== "createTemplateContent") {
      templateType = '';
    }
    switch (templateType) {
      case RICH_MEDIA:
        return (<RichMediaCreate
          location={{
            pathname: '/wechat/richmedia/create',
            query,
          }}
          {...getCommonProps(this.props)}
        />);
      case MAP_TEMPLATE:
        return (<MapTemplate
          location={{
            pathname: '/wechat/create',
            query,
          }}
          Templates={{
            selectedWeChatAccount,
          }}
          params={{}}
          {...getCommonProps(this.props)}
          />);
      default:
        this.props.setIsLoadingContent(false);
        return (<CardContainer>
          <CapRadioCardWithLabel
            label={<FormattedMessage {...messages.templateType}/>}
            panes={this.modes}
            cardHeight={"364px"}
            onChange={this.onChange}
            selected={templateType}
          />
        </CardContainer>);
    }
  }
  getPreviewContent() {
    const { templateType, templateData = {} } = this.props;
    switch (templateType) {
      case RICH_MEDIA:
        return (<WechatRichmediaTemplatePreview
          contentForSlideBox
          templateId={templateData._id}
          path={`/wechat/richmedia/edit/${templateData._id}`}
          content={templateData.versions.base.mediaList}
        />);
      case MAP_TEMPLATE:
      default:
        return (<TemplatePreview
          channel={(templateData.type || '').toLowerCase()}
          content={templateData.content}
      />);
    }
  }
  getEditContent() {
    const { templateType, templateData, query, selectedWeChatAccount } = this.props;
    const { _id: id } = templateData;
    switch (templateType) {
      case RICH_MEDIA:
        // return "richmedia edit";
        return (<RichMediaEdit
          params={{id}}
          location={{
            pathname: `/wechat/richmedia/edit/${id}`,
            query,
          }}
          {...getCommonProps(this.props)}
        />);
      case MAP_TEMPLATE:
      default:
        return (<MapTemplate
          location={{
            pathname: `/wechat/edit/${id}`,
            query,
          }}
          Templates={{
            selectedWeChatAccount,
          }}
          params={{
            id,
          }}
          {...getCommonProps(this.props)}
          />);
    }
  }
  render() {
    const {mode} = this.props;
    // const {templateName} = this.state;
    return (
      <div>
        {
            mode === CREATE && this.getCreateContent()
        }
        {
            mode === PREVIEW && this.getPreviewContent()
        }
        {
            mode === EDIT && this.getEditContent()
        }
      </div>
    );
  }
}

Wrapper.propTypes = {
  mode: PropTypes.string,
  templateType: PropTypes.string,
  templateStep: PropTypes.string,
  templateData: PropTypes.object,
  onWechatTemplateChange: PropTypes.func,
  query: PropTypes.object,
  selectedWeChatAccount: PropTypes.object,
  setIsLoadingContent: PropTypes.func,
  intl: intlShape.isRequired,
};

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

export default connect(null, mapDispatchToProps)(injectIntl(Wrapper));
