import React from 'react';
import { useHistory } from 'react-router-dom';
import Page from './Page';
import ListTable from '../components/ListTable';
import { useContractors } from '../hooks/useAPIClient';

const fields = [
  { key: 'vatId', label: 'УНП' },
  { key: 'name', label: 'Название' },
  { key: 'debt', label: 'Долг' },
];

const actions = [
  { name: 'Добавить', route: 'contractors/add' },
];

const Contractors: React.FC = () => {
  const history = useHistory();
  const { data: contractors } = useContractors();

  const handleRowClick = (index: number) => {
    const contractor = contractors && contractors[index];
    history.push(`/contractors/edit/${contractor?._id}`);
  };

  return (
    <Page title="Контрагенты" actions={actions}>
      <ListTable items={contractors} fields={fields} handleRowClick={handleRowClick} />
    </Page>
  );
};

export default Contractors;