/*
 *
 * MobilepushWrapper
 *
 */
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import {CapRadioCard, CapInput} from '@capillarytech/cap-ui-library';
import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
import {isEmpty} from 'lodash';
import styled from 'styled-components';
import MobilepushCreate from '../MobilePush/Create';
import WithImage from '../../assets/WithImage1';
import WithNoImage from '../../assets/NoImage1';
import messages from './messages';
import './_mobilepushWrapper.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;
        margin-top: unset;
      }
    }
    
  }
`;
export class MobilepushWrapper extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.modes = [

      {
        title: <FormattedMessage {...messages.image}/>,
        content: <WithImage height="216px" width={"224px"}/>,
        value: 'image',
      },
      {
        title: <FormattedMessage {...messages.text}/>,
        content: <WithNoImage height="216px" width={"224px"}/>,
        value: 'text',
        // onClick: () => {
        //   this.emailUploader.current.click();
        // },
      },
    ];
    this.state = {
      templateName: "",
    };
  }


  onChange = (e) => {
    this.props.onMobilepushModeChange( e.target.value );
  };
  onTemplateNameChange = (ev) => {
    const {onEnterTemplateName, onRemoveTemplateName} = this.props;
    this.setState({templateName: ev.target.value});
    if (ev.target.value && onEnterTemplateName) {
      onEnterTemplateName();
    } else if (onRemoveTemplateName) {
      onRemoveTemplateName();
    }
  }

  render() {
    const {mobilePushCreateMode, step, getFormData, getLiquidTags, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = [], waitEventContextTags = {},showTestAndPreviewSlidebox, handleTestAndPreview, handleCloseTestAndPreview, restrictPersonalization, isAnonymousType, onPersonalizationTokensChange} = this.props;
    const {templateName} = this.state;
    const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
    return (
      <div className="mobilepush-wrapper">
        {step === "modeSelection" ?
          <div>
            {isFullMode &&
              <CapInput
                label={<FormattedMessage {...messages.creativeName}/>}
                onChange={this.onTemplateNameChange}
                value={templateName}
                labelPosition="top"
                size="default"
                />
              }
            <CardContainer>
              <CapRadioCardWithLabel
                label={<FormattedMessage {...messages.createMode}/>}
                panes={this.modes}
                cardHeight={"286px"}
                onChange={this.onChange}
                selected={mobilePushCreateMode}
              />
            </CardContainer>
          </div>
        :
          <div>
            {isShowMobilepushCreate && <MobilepushCreate
              getFormLibraryData={getFormData}
              getLiquidTags={getLiquidTags}
              setIsLoadingContent={setIsLoadingContent}
              defaultData={{"template-name": templateName}}
              location={{
                pathname: `/mobilepush/create/${mobilePushCreateMode}`,
                query,
              }}
              params={{mode: mobilePushCreateMode}}
              isFullMode={isFullMode}
              isGetFormData={isGetFormData}
              showTemplateName={showTemplateName}
              route={{ name: 'mobilepush' }}
              getDefaultTags={type}
              onValidationFail={onValidationFail}
              onPreviewContentClicked={onPreviewContentClicked}
              onTestContentClicked={onTestContentClicked}
              templateData={templateData}
              hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
              eventContextTags={eventContextTags}
              waitEventContextTags={waitEventContextTags}
              showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
              showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
              handleTestAndPreview={handleTestAndPreview}
              handleCloseTestAndPreview={handleCloseTestAndPreview}
              restrictPersonalization={restrictPersonalization}
              isAnonymousType={isAnonymousType}
              onPersonalizationTokensChange={onPersonalizationTokensChange}
          />


          }
          </div>
       }
      </div>
    );
  }
}

MobilepushWrapper.propTypes = {
  onMobilepushModeChange: PropTypes.func,
  mobilePushCreateMode: PropTypes.string,
  step: PropTypes.string,
  getFormData: PropTypes.string,
  getLiquidTags: PropTypes.func,
  setIsLoadingContent: PropTypes.func,
  onEnterTemplateName: PropTypes.func,
  onRemoveTemplateName: PropTypes.func,
  isGetFormData: PropTypes.bool,
  query: PropTypes.object,
  isFullMode: PropTypes.bool,
  showTemplateName: PropTypes.func,
  type: PropTypes.string,
  onValidationFail: PropTypes.func,
  eventContextTags: PropTypes.array,
  waitEventContextTags: PropTypes.object,
  showLiquidErrorInFooter: PropTypes.func,
  showTestAndPreviewSlidebox: PropTypes.bool,
  handleTestAndPreview: PropTypes.func,
  handleCloseTestAndPreview: PropTypes.func,
  restrictPersonalization: PropTypes.bool,
  isAnonymousType: PropTypes.bool,
  onPersonalizationTokensChange: PropTypes.func,
};


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

export default connect(null, mapDispatchToProps)(MobilepushWrapper);
