/* eslint-disable no-undef */
/*
 *
 * Edit
 *
 */

import PropTypes from 'prop-types';

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import _ from 'lodash';
import { CapSpin } from '@capillarytech/cap-ui-library';
import { createStructuredSelector } from 'reselect';
import makeSelectEdit, { makeSelectTemplates } from './selectors';
import * as actions from './actions';
import { NO_ONE, ONLY_FOLLOWERS, ANYONE } from './constants';
import Create from '../Create';
import { getCommonProps } from '../../helper';
import injectSaga from '../../../../utils/injectSaga';
import injectReducer from '../../../../utils/injectReducer';
import { v2WechatRichmediaTemplatesEditSagas } from './sagas';
import v2WechatRichmediaTemplatesEditReducer from './reducer';
import { compose } from 'redux';

export class Edit extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.state = {
      totalContentBlocks: 0,
      templateData: {},
    };
    this.setTemplateData = this.setTemplateData.bind(this);
  }
  componentDidMount() {
    this.props.actions.getTemplateDetails(this.props.params.id, "wechat", (templateDetails) => {
      const templateData = this.setTemplateData(templateDetails);
      this.setState({templateData});
    });
  }
  setTemplateData = (templateDetails) => {
    const templateData = {};
    let contentId = 0;
    if (!_.isEmpty(templateDetails)) {
      _.forEach(templateDetails.versions.base.mediaList, (content) => {
        const formData = {};
        let postCommentsValue = NO_ONE;
        if (content.only_fans_can_comment && content.need_open_comment) {
          postCommentsValue = ONLY_FOLLOWERS;
        } else if (content.need_open_comment) {
          postCommentsValue = ANYONE;
        }
        formData['title-value'] = content.title;
        formData['author-value'] = content.author;
        formData['cover-abstract-value'] = content.digest;
        formData['content-value'] = content.content;
        formData['source-link-value'] = content.content_source_url;
        formData['post-comments-value'] = postCommentsValue;
        formData['show-cover-pic-value'] = content.show_cover_pic;
        templateData[contentId] = {
          formData,
          imageUrl: content.image_url,
          mediaId: content.thumb_media_id,
        };
        contentId += 1;
      });
      if (this.props.location.query.type === "embedded" && !this.props.location.query.isEditFromCampaigns) {
        templateData.templateDetails = templateDetails;
      }
    }
    this.setState({totalContentBlocks: contentId});
    return templateData;
  }
  render() {
    if (this.state.templateData && !_.isEmpty(this.state.templateData) && this.state.totalContentBlocks > 0) {
      return (
        <div className="richmedia-container">
          <Create
            templateData={this.state.templateData}
            mode="EDIT"
            totalContentBlocks={this.state.totalContentBlocks}
            templateName={this.props.Edit && this.props.Edit.templateDetails && this.props.Edit.templateDetails.name ? this.props.Edit.templateDetails.name : ""}
            mediaId={this.props.Edit && this.props.Edit.templateDetails && this.props.Edit.templateDetails.versions && this.props.Edit.templateDetails.versions.base && this.props.Edit.templateDetails.versions.base.mediaId ? this.props.Edit.templateDetails.versions.base.mediaId : ""}
            templateId={this.props.Edit && this.props.Edit.templateDetails && this.props.Edit.templateDetails._id ? this.props.Edit.templateDetails._id : ""}
            router={this.props.router}
            location={this.props.location}
            {...getCommonProps(this.props)}
          />
        </div>
      );
    }
    return (
      <CapSpin spinning></CapSpin>
    );
  }
}

Edit.propTypes = {
  router: PropTypes.object,
  location: PropTypes.object,
  actions: PropTypes.object,
  params: PropTypes.object,
  Edit: PropTypes.object,
  Templates: PropTypes.object,
};

const mapStateToProps = createStructuredSelector({
  Edit: makeSelectEdit(),
  Templates: makeSelectTemplates(),
});

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch),
  };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'weChatRichmediaEdit', reducer: v2WechatRichmediaTemplatesEditReducer });
const withSaga = injectSaga({ key: 'weChatRichmediaEdit', saga: v2WechatRichmediaTemplatesEditSagas });

export default compose(withSaga, withReducer, withConnect)(Edit);
