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 { useProduct } from '../hooks/useAPIClient';
import { post, patch } from '../requests';

interface Params {
  id: string;
}

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

const ProductForm: React.FC = () => {
  const history = useHistory();
  const { id } = useParams<Params>();
  const { data: product } = useProduct(id);

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

  return (
    <Page title={id ? product?.name : 'Новый товар'} actions={actions}>
      {(!id || product) && (
        <Formik
          initialValues={product || { name: '', price: '' }}
          onSubmit={onSubmit}
        >
          {() => (
            <Form id="productForm">
              <div className="max-w-lg">
                <Field name="name" label="Название" as={Input} />
                <Field name="price" type="number" label="Цена ($)" as={Input} />
              </div>
            </Form>
          )}
        </Formik>
      )}
    </Page>
  );
};

export default ProductForm;