import React, { useContext } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import _ from 'lodash';
import Page from '../containers/Page';
import ListTable from '../components/ListTable';
import hooks from '../hooks/useAPIClient';
import ServiceContext from './ServiceContext';
import ServiceFilters from './ServiceFilters';
import ServiceSearch from './ServiceSearch';

const ServiceList: React.FC = () => {
  const service = useContext(ServiceContext);
  const history = useHistory();
  const location = useLocation();
  const { data, isValidating } = hooks[service.route].useList(location.search);

  const actions = service.actions || [{
    name: 'Добавить',
    route: `/${service.route}/add${location.search}`,
  }];

  const handleRowClick = (item: any) => {
    const route = service.rowLink
      ? service.rowLink(item)
      : `/${service.route}/${item?._id}`;

    history.push(route);
  };

  const filters = (
    <>
      {service.filters && <ServiceFilters />}
      {service.searchBy && <ServiceSearch />}
    </>
  );

  return (
    <Page
      title={service.name}
      isValidating={isValidating}
      actions={actions}
      filters={filters}
    >
      <ListTable
        items={data}
        fields={service.tableFields}
        isValidating={isValidating}
        handleRowClick={handleRowClick}
      />
    </Page>
  );
};

export default ServiceList;