import { type FC, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import Table from '@/components/Table';
import Filters from '@/components/Filters';
import { useGetFoodOrderReport } from './hooks/useFoodOrderReportData';
import { useFoodOrderReportFilters } from './hooks/useFoodOrderReportFilters';
import { getFoodOrderReportTableColumns } from './components/FoodOrderReportTableColumns';
import { useFoodOrderReportFiltersFields } from './components/FoodOrderReportFiltersFields';
import type { FoodOrderReportItem } from './types/Types';
import type { RowDataType } from '@/components/types/TableTypes';

const FoodOrderReport: FC = () => {
  const { t } = useTranslation('global');
  const { filters, apiParams, handleFiltersChange } = useFoodOrderReportFilters();
  const { data: reportData, isLoading } = useGetFoodOrderReport(apiParams);

  const columns = getFoodOrderReportTableColumns();
  const filterFields = useFoodOrderReportFiltersFields();

  const reportItems = useMemo(() => {
    return (reportData?.data || []).map((item) => ({
      ...item,
      id: item.food.id,
    }));
  }, [reportData?.data]);

  return (
    <div className='mt-5'>
      <div className='flex justify-between items-center'>
        <h1 className='text-lg font-light'>{t('submenu.orders_food_report')}</h1>
      </div>

      <div className='mt-8'>
        <Filters
          fields={filterFields}
          onChange={handleFiltersChange}
          initialValues={filters}
          showClearButton
        />
      </div>

      <Table<FoodOrderReportItem & RowDataType>
        columns={columns}
        data={reportItems as (FoodOrderReportItem & RowDataType)[]}
        isloading={isLoading}
      />
    </div>
  );
};

export default FoodOrderReport;