import React, { useContext } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { Formik } from 'formik';
import _ from 'lodash';
import Page, { Action } from '../Page';
import hooks from '../../hooks/useAPIClient';
import { post, patch } from '../../requests';
import ServiceContext from './ServiceContext';

interface Params {
  id: string;
}

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

const ServiceForm: React.FC = () => {
  const service = useContext(ServiceContext);
  const history = useHistory();
  const { id } = useParams<Params>();
  const { data: item } = hooks[service.route].useItem(id);

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

  return (
    <Page title={id ? item?.name : `Новый ${service.nameSingular}`} actions={actions}>
      {(!id || item) && (
        <Formik
          initialValues={_.defaults(item, service.default)}
          onSubmit={onSubmit}
        >
          <service.Form />
        </Formik>
      )}
    </Page>
  );
};

export default ServiceForm;
