import React from 'react';
import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import ModuleButton from 'components/items/ModuleButton';
import { required, email, composeValidators } from 'store/utils/validation';
import { config, viewConfig } from 'config/general';
import { fieldsToList } from 'store/utils/adminHelpers';
import ModuleDetailStructure from 'components/enhancers/ModuleDetailStructure';
import GenericFields from 'components/formHelpers/GenericFields';
import { formMutators } from 'store/utils/helper';
import styleIdentifiers from './moduleForm.scss';

const GenericStructure = ModuleDetailStructure(GenericFields);

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export default class ModuleForm extends React.Component<StateProps, DispatchProps, OwnProps> {
  render() {
    const {
      fields,
      valid,
      history,
      push,
      title,
      submitting,
      handleSubmit,
      legend,
      initialValues,
      formValues,
      loading,
      resourceData,
      dataOptions,
      withHeader,
      noHeader,
      fieldsProps,
      form,
    } = this.props;

    // If id => edit (no header submit)
    const showHeader = !initialValues || !initialValues[config.idKey] || dataOptions || withHeader;

    return (
      <form className={styles('ModuleForm', legend && 'legend')} onSubmit={handleSubmit}>
        {/* {showHeader && !noHeader && (
          <div className={styles('header')}>
            <h1>{title}</h1>
            <div className={styles('actions')}>
              <ModuleButton
                label="admin.buttons.back"
                noMargin
                color={viewConfig.colorBack}
                relative
                action={() => history.goBack()}
              />

              <ModuleButton
                disabled={!valid || submitting}
                label="admin.buttons.submit"
                loading={loading.update || loading.add}
                noMargin
                color={viewConfig.colorSubmit}
                relative
                type="submit"
              />
            </div>
          </div>
        )} */}
        <div className={styles('content')}>
          <GenericStructure
            finalForm
            allOpened
            scrollableColumns
            minWidth={config.widthEditColumn}
            value={initialValues}
            formValues={formValues}
            form={form}
            resourceData={resourceData}
            edit={initialValues && initialValues[config.idKey]}
            push={push}
            items={fieldsToList(fields)}
            formName="moduleForm"
            fieldsProps={fieldsProps}
            mutators={{ ...formMutators }}
            sectionWrapperClassName={styles('wrapper-section')}
            sectionClassName={styles('section')}
            sectionTitleClassName={styles('section-title')}
            title={title}
            actions={[
              {
                label: 'admin.buttons.submit',
                type: 'submit',
              },
            ]}
          />
        </div>
        {legend && (
          <div className={styles('footer')}>
            <div className={styles('left')}>{legend}</div>
          </div>
        )}
      </form>
    );
  }
}
