import { IconCirclePlus } from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query';
import { ActionIcon, Affix, Tooltip } from '@mantine/core';

import BaseTable from '@/components/BaseTable/BaseTable';
import { MarketplaceSchema } from '@/lib/client';
import { getMarketplacesOptions } from '@/lib/client/@tanstack/react-query.gen';
import useMarketplacesTableColumns from '@/pages/marketplaces/components/MarketplacesTable/columns';
import { CRUDTableProps } from '@/types/CrudTable/CrudTable';

type Props = CRUDTableProps<MarketplaceSchema>;
const MarketplacesTable = (props: Props) => {
  const { data, isLoading } = useQuery({
    ...getMarketplacesOptions({ path: { clientId: 5 } }),
  });
  const onCreateClick = ()=>{

  }

  const columns = useMarketplacesTableColumns();
  return (
    <>
      <BaseTable
        scrollAreaProps={{ type: 'auto' }}
        style={{ width: '100%', height: '100%' }}
        records={data?.items || []}
        columns={columns}
        fetching={isLoading}
      />
      <Affix position={{ bottom: 40, right: 40 }}>
        <Tooltip label="Создать маркетплейс" withArrow>
          <ActionIcon onClick={() => {}} size="xl" variant="gradient" radius="xl">
            <IconCirclePlus />
          </ActionIcon>
        </Tooltip>
      </Affix>
    </>
  );
};

export default MarketplacesTable;