import React, { useEffect, useState } from 'react';
import { useProductDetails } from '../../../store';

import { Empty, Skeleton } from 'antd';
import { Checkbox } from '@bjsdistribution/dms-component-library';
import { useLoading } from '../../../../order-daily-overview/store/store';
import { useSelectedSplit, useSplitOrderPayload } from '../../store';
import {
  EmptyDataContainer,
  StyledTable,
  StyledTableWrapper,
} from '../confirm-order/tables/ReminderStyles';

function SplitOrderTable() {
  const [orderProductDetails] = useProductDetails();
  const [loading] = useLoading();
  const [selectedSplits, setSelectedSplit] = useSelectedSplit();
  const [selectAll, setSelectAll] = useState(false);
  const [payload, setPayload] = useSplitOrderPayload();

  // Handle Select All
  const handleSelectAll = (e: any) => {
    const isChecked = e.target.checked;
    setSelectAll(isChecked);

    if (isChecked) {
      setSelectedSplit(
        orderProductDetails?.map((order: any) => ({ id: order.id }))
      );
    } else {
      setSelectedSplit([]);
    }
  };

  const handleSelectedSplitList = (id: any) => {
    setSelectedSplit(prevSelectedOrder => {
      const isSelected = prevSelectedOrder?.some(order => order.id === id);

      const updatedSelection = isSelected
        ? prevSelectedOrder?.filter(order => order.id !== id)
        : [...prevSelectedOrder, { id }];

      setSelectAll(updatedSelection?.length === orderProductDetails?.length);

      return updatedSelection;
    });
  };

  useEffect(() => {
    setPayload({
      ...payload,
      return_order: 1, // FOR SPLIT ORDER WE ARE ASKED TO SET THIS AS 1
      products: selectedSplits?.map(order => order.id),
      force: true,
    });
  }, [selectedSplits, setPayload]);

  return (
    <StyledTableWrapper id="tableScrolling">
      <StyledTable>
        <thead>
          <tr>
            <th>
              <Checkbox
                checked={selectAll}
                onChange={handleSelectAll}
                disabled={
                  orderProductDetails?.length === 0 ||
                  orderProductDetails?.length === null
                }
              />
            </th>
            <th>Type</th>
            <th>Code</th>
            <th>Scan</th>
            <th>Description</th>
            <th>Delivery Instructions</th>
            <th>Barcode</th>
          </tr>
        </thead>
        <tbody>
          {loading ? (
            <tr>
              <td colSpan={6}>
                <Skeleton active />
              </td>
              <td colSpan={6}></td>
            </tr>
          ) : orderProductDetails?.length === 0 ? (
            <tr>
              <td className="emptyTd" colSpan={7}>
                <EmptyDataContainer>
                  <Empty description="No Data Found" />
                </EmptyDataContainer>
              </td>
            </tr>
          ) : (
            orderProductDetails?.length > 0 &&
            orderProductDetails?.map((order: any) => (
              <tr key={order.id}>
                <td>
                  <Checkbox
                    checked={selectedSplits?.some(
                      selectedOrder => selectedOrder.id === order.id
                    )}
                    onChange={() => handleSelectedSplitList(order.id)}
                  />
                </td>
                <td>{order?.order_product_type?.type}</td>
                <td>{order?.code}</td>
                <td>{order?.description}</td>
                <td>{order?.description}</td>
                <td>{order?.description}</td>
                <td>{order?.sku}</td>
              </tr>
            ))
          )}
        </tbody>
      </StyledTable>
    </StyledTableWrapper>
  );
}

export default SplitOrderTable;
