import * as React from 'react';
import { Field } from 'react-final-form';
import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import { required } from 'store/utils/validation';
import { viewConfig } from 'config/general';
import TextItem from 'components/items/TextItem';
import ModuleButton from 'components/items/ModuleButton';
import styleIdentifiers from './pageForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface PageFormProps {
  handleSubmit: Function;
  submitting?: boolean;
  valid?: boolean;
  deleteItem: Function;
  edit: boolean;
}

interface PageFormState {}

export default class PageForm extends React.Component<PageFormProps, PageFormState> {
  render() {
    const { edit, handleSubmit, submitting, valid, deleteItem } = this.props;

    return (
      <form className={styles('PageForm')} onSubmit={handleSubmit}>
        <h2>
          <TextItem path={edit ? 'admin.addPage.titleUpdate' : 'admin.addPage.titleAdd'} />
        </h2>
        <Field
          {...viewConfig.inputProps}
          component={Input}
          name="label"
          type="text"
          label="admin.addPage.title"
          validate={required}
        />
        <Field
          {...viewConfig.inputProps}
          component={Input}
          name="title"
          type="text"
          label="admin.addPage.codeKey"
          validate={required}
        />
        <Field
          {...viewConfig.inputProps}
          component={Input}
          name="position"
          inputType="number"
          label="admin.addPage.pagePosition"
        />
        <ModuleButton
          color="primary"
          disabled={!valid || submitting}
          label="admin.addPage.submit"
          type="submit"
        />
        {edit && deleteItem && (
          <ModuleButton color="red" label="admin.addPage.delete" action={deleteItem} />
        )}
      </form>
    );
  }
}
