Untitled

import { dateFormatter } from '@/modules/shared/utils/utils';
import { useAppDispatch } from '@/store/hooks';
import { CombinedState } from '@reduxjs/toolkit';
import { FC, Key, useCallback, useEffect, useMemo, useState } from 'react';
import { UseFormReturn } from 'react-hook-form';
import { StoreType } from '../../../../store';
import PageTable from '../../components/table/page-table.component';
import {
  ProductionOrder,
  ProductionOrderMapped,
} from '../settings/redux/productionOrders/interfaces';
import { StatusUpdateData } from '../settings/redux/productionOrders/productionOrdersStatus/interfaces';
import { updateProductionOrderStatus } from '../settings/redux/productionOrders/productionOrdersStatus/thunks';
import { filterProductionOrders } from '../settings/redux/productionOrders/slice';
import {
  deleteProductionOrder,
  getAllProductionOrders,
} from '../settings/redux/productionOrders/thunks';

const ProductionOrdersTable: FC = () => {
  const columnsOrder: (keyof ProductionOrderMapped)[] = useMemo(
    () => [
      'id',
      'orderNumber',
      'orderType',
      'creationDate',
      'status',
      'customerName',
      'salesOrderNumber',
      'salesOrderType',
      'materialName',
      'articleName',
      'colorName',
      'quantity1',
      'unitOfMeasure1',
      'quantity2',
      'unitOfMeasure2',
      'quantity3',
      'salesOrderDeliveryDate',
      'initialPlanningDate',
      'POFinalDeliveryDate',
      'POPosition',
      'deliveryOfPosition',
      'originPO',
      'situation',
    ],
    [],
  );

  const mapper = useCallback(
    (obj: ProductionOrder): ProductionOrderMapped => ({
      id: obj.id,
      orderNumber: obj.salesOrderDto.orderNumber,
      orderType: obj.salesOrderDto.orderType.name,
      creationDate: dateFormatter(obj.changeHistoryDto.createdOn),
      status: obj.statusOfPlanning.name,
      customerName: obj.salesOrderDto.customer.name,
      salesOrderNumber: obj.salesOrderDto.customerOrderNumber,
      salesOrderType: obj.salesOrderDto.orderType.name,
      materialName: obj.salesOrderMaterialDto.material.name,
      articleName: obj.salesOrderMaterialDto.material.article.name,
      colorName: obj.salesOrderMaterialDto.material.color.name,
      quantity1: obj.quantity1,
      unitOfMeasure1: obj.salesOrderMaterialDto.material.unitOfMeasure1?.name || '',
      quantity2: obj.quantity2,
      unitOfMeasure2: obj.salesOrderMaterialDto.material.unitOfMeasure2?.name || '',
      quantity3: obj.quantity3,
      salesOrderDeliveryDate: obj.foreseenDelivery,
      initialPlanningDate: dateFormatter(obj.initialDate),
      POFinalDeliveryDate: dateFormatter(obj.finalDelivery),
      POPosition: 'Added later',
      deliveryOfPosition: 'Added Later',
      originPO: obj.origin,
      situation: obj.situation.name,
    }),
    [],
  );
  const getName = useCallback((obj: ProductionOrderMapped) => String(obj.orderNumber), []);
  const stateSelector = useCallback(
    (state: CombinedState<StoreType>) => state.productionOrders,
    [],
  );
  const dispatch = useAppDispatch();
  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>();

  const onSelectionChange = useCallback((newSelectedRowKeys?: Key[]): void => {
    setSelectedRowKeys(newSelectedRowKeys || []);
  }, []);

  const updateStatuses = (status: number): void => {
    const putData: StatusUpdateData = {
      productionOrders: selectedRowKeys!,
      statusOfPlanningEnum: status - 1,
    };

    dispatch(updateProductionOrderStatus(putData));
  };
  /// from here

  const [statusValue, setStatusValue] = useState<number>(1);

  const doSelectionChange = useCallback(
    (selectedRowKeysParam?: Key[]) => {
      onSelectionChange?.(selectedRowKeysParam);
    },
    [onSelectionChange],
  );

  const additionalSearch = useCallback(
    (
      form: UseFormReturn<
        {
          search: string;
          status: string | number | undefined;
        },
        any
      >,
    ) => {
      const { watch } = form;

      watch((value, { name }) => {
        if (name === 'status') {
          setStatusValue(value.status as number);
        }
      });
  }, []);

  const rowSelection = {
    selectedRowKeys,
    onChange: doSelectionChange,
    getCheckboxProps: (record: any) => ({
      disabled: statusValue === 1 || !record.originPO,
    }),
  };

  return (
    <PageTable
      ns={'productionOrder'}
      columnsOrder={columnsOrder}
      readThunk={getAllProductionOrders}
      filterThunk={filterProductionOrders}
      deleteThunk={deleteProductionOrder}
      stateSelector={stateSelector}
      mapEntityToUiData={mapper}
      getName={getName}
      onSelectionChange={onSelectionChange}
      selectedRowKeys={selectedRowKeys}
      shouldFilterByStatus={true}
      updateStatus={updateStatuses}
      additionalSearch={additionalSearch}
    />
  );
};

export default ProductionOrdersTable;