import React from 'react';
import classNames from 'classnames/bind';
import GenericFields from 'components/formHelpers/GenericFields';
import MosaicStructure from 'components/enhancers/MosaicStructure';

import ModuleButton from 'components/items/ModuleButton';
// import { required } from 'store/utils/validation';
import { config } from 'config/general';
import { fieldsToList } from 'store/utils/adminHelpers';
import TextItem from 'components/items/TextItem';
import { formMutators } from 'store/utils/helper';
import GenericHeader from 'components/pageItems/GenericHeader';
import styleIdentifiers from './genericForm.scss';

const GenericStructure = MosaicStructure(GenericFields);

const styles = classNames.bind(styleIdentifiers);

export interface GenericFormProps {
  handleSubmit: Function;
  valid?: boolean;
  fields: Record<string, any>;
  initialValues: Record<string, any>;
  title?: string;
  legend?: Record<string, any>;
  push: Function;
  name?: string;
  loading: Record<string, any>;
}

interface GenericFormState {}

export default class GenericForm extends React.Component<GenericFormProps, GenericFormState> {
  constructor(props) {
    super(props);

    const { allOpened } = props;

    this.state = {
      allOpened,
    };
  }

  componentDidMount() {
    const { form, setForm } = this.props;
    setForm(form);
  }

  render() {
    const {
      fields,
      title,
      handleSubmit,
      legend,
      initialValues,
      loading,
      resourceData,
      dataOptions,
      withHeader,
      noHeader,
      fieldsProps,
      noBack,
      noCancel,
      classNameStructure,
      children,
      submitLabel,
      noSubmit,
    } = this.props;

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

    const listFields = fieldsToList(fields);

    return (
      <form className={styles('GenericForm', legend && 'legend')} onSubmit={handleSubmit}>
        {showHeader && !noHeader && (
          <GenericHeader
            title={title}
            loading={loading}
            noBack={noBack}
            noCancel={noCancel}
            saveButton
            submitLabel={submitLabel}
            noSubmit={noSubmit}
          >
            {children}
          </GenericHeader>
        )}
        <div className={styles('content', showHeader && !noHeader && 'padding')}>
          <GenericStructure
            finalForm
            scrollableColumns
            className={classNameStructure}
            minWidth={config.widthEditColumn}
            value={initialValues}
            resourceData={resourceData}
            edit={initialValues && initialValues[config.idKey]}
            items={listFields}
            oneSection={listFields?.length === 1}
            fieldsProps={fieldsProps}
            mutators={{ ...formMutators }}
            allOpened={allOpened}
          />
        </div>
        {(listFields.length >= 3 || legend) && (
          <div className={styles('footer')}>
            <div className={styles('left')}>{legend}</div>
            {listFields.length >= 3 && (
              <ModuleButton
                label={allOpened ? 'admin.buttons.closeAll' : 'admin.buttons.openAll'}
                noMargin
                small
                color="primary"
                relative
                action={() => {
                  this.setState({
                    allOpened: !allOpened,
                  });
                }}
              />
            )}
          </div>
        )}
      </form>
    );
  }
}
