/* eslint-disable array-callback-return */
/* eslint-disable no-restricted-syntax */
/* eslint-disable guard-for-in */
import React, { lazy, Suspense } from 'react';
import { Field, reduxForm, change } from 'redux-form';
import { connect } from 'react-redux';
import moment from 'moment';
import { Translate } from 'react-localize-redux';
import { renderField, required, checkField } from '../../../components/Field';
import ButtonLoader from '../../../components/ButtonLoader';
import {
  createData,
  updateData,
  detailData
} from '../../../actions/news.action';
import PageLoader from '../../../components/PageLoader';
import ButtonCancel from '../../../components/ButtonCancel';
import { titleForm } from '../../../helpers/propHelper';
import FieldDropzone from '../../../components/dropzone/FieldDropzone';
import FieldDropzoneMultiple from '../../../components/dropzone/FieldDropzoneMultiple';
import ExpertiseField from '../../../components/checkbox/ExpertiseField';
// import TinyMce from '../../../components/wysiwyg/TinyMce';

const FieldTinyMce = lazy(() =>
  import('../../../components/wysiwyg/FieldTinyMce')
);

class NewsForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      deleteImageIds: []
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    const { match, detailData } = this.props;
    const isEdit = match.params.id !== undefined;
    if (isEdit) {
      const ids = match.params.id;
      detailData(ids);
    }
  }

  componentWillReceiveProps(nextProps) {
    const { data, dispatch, match } = this.props;
    const isEdit = match.params.id !== undefined;
    if (isEdit) {
      const initInput = ['title', 'content', 'cover_image'];
      if (data.dataDetail !== nextProps.data.dataDetail) {
        initInput.map(data => {
          dispatch(change('newsForm', data, nextProps.data.dataDetail[data]));
        });

        if (nextProps.data.dataDetail.expertises) {
          const arr = [];
          nextProps.data.dataDetail.expertises.map(data => {
            arr.push(data.id);
          });
          dispatch(change('newsForm', 'expertises', arr));
        }

        if (nextProps.data.dataDetail.images) {
          const arrImg = [];
          nextProps.data.dataDetail.images.map(data => {
            arrImg.push({
              preview: data.images,
              id: data.id,
              name: `${moment(data.created_at.date).unix()}${data.id}`
            });
          });
          dispatch(change('newsForm', 'images', arrImg));
        }
      }
    }
  }

  onSubmit(value) {
    const { createData, updateData, match } = this.props;
    const { deleteImageIds } = this.state;
    const isEdit = match.params.id !== undefined;
    const formData = new FormData();
    const formImage = ['cover_image'];
    const formArray = ['expertises', 'images'];
    for (const key in value) {
      if (formImage.includes(key)) {
        if (typeof value.cover_image === 'object') {
          formData.append(
            'cover_image',
            value.cover_image,
            `_${Date.now()}${value.cover_image.name}`
          );
        }
      } else if (formArray.includes(key)) {
        if (key === 'expertises') {
          value[key].map(val => {
            formData.append('expertises[]', val);
          });
        }
        if (key === 'images') {
          value[key].map(val => {
            formData.append('images[]', val);
          });
        }
      } else {
        formData.append(key, value[key]);
      }
    }

    // formData.append('publish', value.publish ? 1 : 0);
    if (isEdit) {
      if (deleteImageIds.length > 0) {
        deleteImageIds.map(val => {
          formData.append('delete_image_id[]', val);
        });
      }

      updateData(formData, match.params.id);
    } else {
      createData(formData);
    }
  }

  onDelete = deleteImageId => {
    if (deleteImageId) {
      this.setState(state => {
        const deleteImageIds = [...state.deleteImageIds, deleteImageId];
        return {
          deleteImageIds
        };
      });
    }
  };

  render() {
    const { handleSubmit, data, current, match } = this.props;
    const isEdit = match.params.id !== undefined;
    const title = titleForm(this.props);

    return (
      <div className="card-body">
        <div className="row mb-3">
          <div className="col-md-6">
            <h2 className="card-title font-weight-bold mb-0 text-uppercase">
              {title}
            </h2>
          </div>
        </div>
        {data.isLoadingDetail ? (
          <PageLoader />
        ) : (
          current && (
            <form
              className="forms-sample"
              onSubmit={handleSubmit(this.onSubmit)}
            >
              <Translate>
                {({ translate }) => (
                  <div className="row">
                    <div className="col-md-6">
                      <Field
                        name="title"
                        requiredStar
                        type="text"
                        component={renderField}
                        label={translate('title')}
                        id="inputTitle"
                        placeholder={translate('enter_title')}
                        validate={[required]}
                      />
                      <Suspense fallback="">
                        <FieldTinyMce />
                      </Suspense>
                      {isEdit ? (
                        <Field
                          name="cover_image"
                          type="text"
                          label={translate('cover_image')}
                          component={FieldDropzone}
                        />
                      ) : (
                        <Field
                          name="cover_image"
                          type="text"
                          requiredStar
                          label={translate('cover_image')}
                          component={FieldDropzone}
                          validate={[required]}
                        />
                      )}
                    </div>
                    <div className="col-md-6">
                      <ExpertiseField companyId={current.company.id} />
                      <Field
                        name="images"
                        type="text"
                        onDelete={this.onDelete}
                        label={translate('slider_image')}
                        component={FieldDropzoneMultiple}
                      />
                      {/* {!isEdit && (
                    <Field
                      name="publish"
                      type="checkbox"
                      component={checkField}
                      label="Publish"
                      id="inputPublish"
                    />
                  )} */}
                    </div>
                    <div className="col-md-12">
                      <div className="d-flex">
                        <ButtonCancel />
                        <ButtonLoader
                          type="submit"
                          className="btn btn-primary mr-2"
                          loader={data.isLoading}
                        >
                          <Translate id="submit" />
                        </ButtonLoader>
                      </div>
                    </div>
                  </div>
                )}
              </Translate>
            </form>
          )
        )}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  data: state.news,
  current: state.user.current
});

export default reduxForm({
  form: 'newsForm' // a unique identifier for this form
})(
  connect(
    mapStateToProps,
    { createData, updateData, detailData }
  )(NewsForm)
);