import React from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { Formik, Form, Field } from 'formik';
import Page, { Action } from './Page';
import Input from '../components/Input';
import { useContractor } from '../hooks/useAPIClient';
import { post, patch } from '../requests';

interface Params {
  id: string;
}

const actions: Action[] = [
  { name: 'Назад', variant: 'outlined', route: '..' },
  { name: 'Сохранить', type: 'submit', form: 'contractorForm' },
];

const ContractorForm: React.FC = () => {
  const history = useHistory();
  const { id } = useParams<Params>();
  const { data: contractor } = useContractor(id);

  const onSubmit = (values: any) => {
    const promise = id
      ? patch(`/contractors/${id}`, values)
      : post('/contractors', values);
    return promise.then(() => history.push('/contractors'));
  };

  return (
    <Page title={id ? contractor?.name : 'Новый контрагент'} actions={actions}>
      {(!id || contractor) && (
        <Formik
          initialValues={contractor || { name: '', debt: '', vatId: '' }}
          onSubmit={onSubmit}
        >
          {() => (
            <Form id="contractorForm">
              <div className="max-w-lg">
                <Field name="name" label="Название" as={Input} />
                <Field name="vatId" label="УНП" as={Input} />
                <Field name="debt" type="number" label="Долг ($)" as={Input} />
              </div>
            </Form>
          )}
        </Formik>
      )}
    </Page>
  );
};

export default ContractorForm;