import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import { Redirect } from 'react-router-dom';
import _ from 'lodash';
import ModuleButton from 'components/items/ModuleButton';
import styleIdentifiers from './detail.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type DetailProps = StateProps & DispatchProps & OwnProps;

const SchemaType = [
  { value: 'string', label: 'String' },
  { value: 'number', label: 'Number' },
  { value: 'radio', label: 'Radio' },
  { value: 'select', label: 'Select' },
];

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

const Detail = (props: DetailProps) => {
  const {
    data,
    detail,
    history,
    match: { params },
  } = props;

  const [item, setItem] = useState(null);

  useEffect(() => {
    if (data && data.data && data.data.submissions) {
      if (params.itemId) {
        const element = _.find(data.data.submissions, el => el._id === params.itemId);
        if (element) setItem(element);
      }
    }
  }, [params]);

  return (
    <div className={styles('Detail')}>
      {!detail && <Redirect to={`/forms/${params.id}`} />}
      <div className={styles('header')}>
        <h1>
          <TextItem path={`From ${(detail && detail.title) || null} answer`} />
        </h1>
        <div className={styles('actions')}>
          <ModuleButton relative noMargin label="Back" action={() => history.goBack()} />
        </div>
      </div>
      <div className={styles('content')}>
        {item && item.formData && (
          <div className={styles('section-wrapper')}>
            <div className={styles('section')}>
              {Object.keys(item.formData).map((el, key) => (
                <div key={key} className={styles('item-result')}>
                  <div className={styles('label')}>{el}</div>
                  <div className={styles('value')}>{item.formData[el]}</div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Detail;
