import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import GenericForm from 'components/forms/GenericForm';
import { Form } from 'react-final-form';
import arrayMutators from 'final-form-arrays';
import styleIdentifiers from './manage.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ManageProps = StateProps & DispatchProps & OwnProps;

const SchemaType = [
  { value: 'string', label: 'String' },
  { value: 'number', label: 'Number' },
  { value: 'radio', label: 'Radio' },
  { value: 'select', label: 'Select' },
  { value: 'textarea', label: 'TextArea' },
  { value: 'email', label: 'Email' },
  { value: 'checkbox', label: 'Checkbox' },
];

const fields = {
  section: {
    type: 'section',
    label: 'Fields',
    fields: [
      { name: 'title', type: 'string', label: 'title', required: true },
      {
        type: 'list',
        name: 'formData',
        label: 'Form Structure',
        fields: [
          { name: 'title', type: 'string', label: 'name', required: true },
          { name: 'label', type: 'multi', label: 'label' },
          { name: 'placeholder', type: 'multi', label: 'placeholder' },
          { name: 'schema.required', label: 'required', type: 'bool' },
          {
            name: 'schema.type',
            type: 'select',
            label: 'type',
            values: SchemaType,
            required: true,
          },
          {
            label: 'List',
            type: 'list',
            name: 'schema.list',
            fields: [
              { name: 'label', type: 'multi', label: 'Label' },
              { name: 'value', type: 'string', label: 'value', required: true },
            ],
          },
          {
            label: 'Position',
            type: 'number',
            inputType: 'number',
            name: 'position',
          },
        ],
      },
    ],
  },
  options: {
    type: 'section',
    label: 'Options',
    fields: [
      {
        type: 'string',
        label: 'Mailjet template ID',
        name: 'emailConfirmationData.MJ_templateId',
      },
    ],
  },
  marketing: {
    type: 'section',
    label: 'Marketing Data',
    fields: [
      {
        type: 'string',
        label: 'Active campaign Id',
        name: 'marketingData.AC_listId',
      },
    ],
  },
};

const Manage = (props: ManageProps) => {
  const {
    createForm,
    updateForm,
    getDetail,
    detail,
    history,
    match: { params },
  } = props;

  function treatData(val) {
    if (val.formData) {
      for (let index = 0; index < val.formData.length; index++) {
        const element = val.formData[index];
        if (element.position) element.position = parseFloat(element.position);
        else element.position = index + 1;
      }
    }
    return val;
  }

  function onSubmit(val) {
    const data = treatData(val);

    if (params.id) {
      updateForm({
        data,
        id: params.id,
        model: fields,
        callback: res => history.push(`/forms/${res._id}`),
      });
    } else {
      createForm({
        data,
        callback: res => history.push(`/forms/${res._id}`),
      });
    }
  }

  useEffect(() => {
    if (params.id) getDetail({ id: params.id });
  }, [params.id]);

  return (
    <div className={styles('Manage')}>
      <Form
        component={GenericForm}
        mutators={{ ...arrayMutators }}
        withHeader
        title={params.id ? 'Edit Form' : 'Create Form'}
        fields={fields}
        onSubmit={onSubmit}
        initialValues={params.id ? detail : {}}
      />
    </div>
  );
};

export default Manage;
