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

const fields = [
  { key: 'name', label: 'Название' },
  { key: 'price', label: 'Цена' },
];

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

const Products: React.FC = () => {
  const history = useHistory();
  const { data: products } = useProducts();

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

  return (
    <Page title="Товары" actions={actions}>
      <ListTable items={products} fields={fields} handleRowClick={handleRowClick} />
    </Page>
  );
};

export default Products;