import React, { useEffect } from 'react';
import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
import styled from 'styled-components';
import SplitOrderTable from './SplitOrderTable';
import { useCurrentAction, useOrderDetails, useOrderId } from '../../../store';
import { useApiHook } from '@bjsdistribution/dms-component-library';
import { ApiResponse } from '../../../types';

import { useSelectedSplit, useSplitOrderPayload } from '../../store';
import { notification } from 'antd';
import { useNavigate } from 'react-router-dom';

function SplitOrder() {
  const [, setCurrentAction] = useCurrentAction();
  const [orderDetails] = useOrderDetails();
  const orderRecipient = orderDetails?.order_recipient;
  const infoText = `${orderRecipient?.recipient_name}, ${orderRecipient?.postcode}`;
  const [orderId, setOrderID] = useOrderId();
  const [payload] = useSplitOrderPayload();
  const [seledtedSplitOrder, setSelectedSplit] = useSelectedSplit();

  const onClose = () => {
    setCurrentAction(undefined);
  };
  const navigate = useNavigate();
  const {
    data: response,
    setShouldPerformAction: setPerformAction,
  } = useApiHook<{
    data: ApiResponse[];
  }>({
    endpoint: `/v1/return/split/${orderId}`,
    method: 'POST',
    body: payload,
    performAction: false,
  });

  const onSubmitSplitOrder = () => {
    if (orderId) {
      setPerformAction(true);
    }
  };
  //@ts-ignore
  const newId = response?.data?.new_order;
  useEffect(() => {
    //@ts-ignore
    if (response?.code === 200) {
      const currentPath = location.pathname
        .split('/')
        .slice(0, -1)
        .join('/');
      console.log(currentPath, 'currentPath');
      navigate(`${currentPath}/${newId}`);
      setOrderID(newId);
      setSelectedSplit([]);
      notification.success({
        message: 'Success',
        description:
          //@ts-ignore
          response?.message || 'Sucess',
      });
      setCurrentAction(undefined);
      setSelectedSplit([]);
    }
  }, [response]);

  const isSubmitDisabled = () => {
    if (seledtedSplitOrder?.length > 0) {
      return !seledtedSplitOrder;
    }
    return true;
  };

  return (
    <OrderActionModal
      headerTitle="Split Order"
      showAdditionalInfo
      infoText={infoText}
      onCloseHeader={onClose}
      onSubmit={onSubmitSplitOrder}
      submitBtnTitle="Split Order"
      footerActions={
        <>
          {/* <CheckContainer>
            <label className="check">
              <input type="checkbox" />
              Force Split
            </label>
          </CheckContainer> */}
        </>
      }
      isSubmitDisabled={isSubmitDisabled()}
    >
      <ContentContainer>
        <SplitOrderTable />
      </ContentContainer>
    </OrderActionModal>
  );
}

const ContentContainer = styled.div`
  /* display: flex; */
  padding: 15px 12px;
  flex: 1 0 0;
  border-radius: 15px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: auto;
  min-height: 500px;
  overflow-x: hidden;
  max-height: 500px;
  scrollbar-width: thin;
`;

export default SplitOrder;
