import React from 'react';
import { Form, FormikProps } from 'formik';
import moment from 'moment';
import Input from '../../components/Input';
import Select from '../../components/Select';
import hooks from '../../hooks/useAPIClient';
import { Contractor, Transfer } from '../types';


const mapper = (item: Contractor) => ({ key: item._id, label: item.name });


const TransferForm: React.FC<FormikProps<Transfer>> = ({ setFieldValue, values }) => {
  const { data: contractors } = hooks.contractors.useList();
  const { data: accounts } = hooks.accounts.useList();

  if (!values.date) setFieldValue('date', moment().format('YYYY-MM-DD'));
  if (!values.contractorId && contractors?.length) setFieldValue('contractorId', contractors[0]._id);
  if (!values.accountId && accounts?.length) setFieldValue('accountId', accounts[0]._id);

  return (
    <Form id="form">
      <Input name="date" type="date" label="Дата" required />
      <div className="grid grid-cols-2">
        <Select
          name="accountId"
          label="Счёт"
          options={accounts?.map(mapper)}
          required
        />
        <Select
          name="contractorId"
          label="Контрагент"
          options={contractors?.map(mapper)}
          required
        />
      </div>
      <div className="grid grid-cols-2">
        <Select
          name="operation"
          label="Операция"
          options={[
            { key: 'in', label: 'Приход' },
            { key: 'out', label: 'Расход' },
          ]}
        />
        <Input name="amount" type="number" label="Сумма" required />
      </div>
    </Form>
  );
};

export default TransferForm;