import {
  CancelAndCompleteAction,
  CancelationModal,
  useApiHook,
} from '@bjsdistribution/dms-component-library';
import React, { useEffect } from 'react';
import styled from 'styled-components';
import {
  useCurrentAction,
  useLiveRecalling,
  useOrderDetails,
  useOrderId,
  usePrevOrderDetails,
} from '../../../store';
import { ApiResponse, OrdersType } from '../../../types';
import { useLoading } from '../../../../order-daily-overview/store/store';
import { notification } from 'antd';

interface IProps {
  callOrderAlertsApi: any;
}

const ClearBookingStatus = (props: IProps) => {
  const [orderId] = useOrderId();
  const [, setOrderDetails] = useOrderDetails();
  const [, setPrevOrderDetails] = usePrevOrderDetails();
  const [, setLoading] = useLoading();
  const [, setCurrentAction] = useCurrentAction();
  const [liveRecalling, setRecalling] = useLiveRecalling();

  const {
    data: response,
    setShouldPerformAction: setPerformAction,
  } = useApiHook<{
    data: ApiResponse[];
  }>({
    endpoint: `orders/${orderId}/clear-date/`,
    method: 'POST',
    performAction: false,
  });
  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
    data: OrdersType[];
  }>({
    endpoint: `orders/${orderId}`,
    method: 'GET',
    performAction: false,
  });
  const callOrdersApi = async () => {
    await props?.callOrderAlertsApi();
  };
  useEffect(() => {
    setLoading(loading);
    if (fetchedData && fetchedData?.data) {
      const requiredData = fetchedData?.data;
      setOrderDetails(requiredData[0]);
      setPrevOrderDetails(requiredData[0]);
      callOrdersApi();
      setCurrentAction(undefined);
    }
    if (
      (fetchedData && fetchedData?.data === null) ||
      fetchedData?.data?.length === 0
    ) {
      setCurrentAction(undefined);
    }
  }, [loading]);

  useEffect(() => {
    if (response) {
      //@ts-ignore
      if (response?.data && response?.code === 200) {
        setShouldPerformAction(true);
        setRecalling(true);
        setTimeout(() => {
          setRecalling(false);
        }, 2000);
      } else {
        notification.error({
          message: 'Error',
          description:
            //@ts-ignore
            response?.error_traceback ||
            'An error has occurred. Please try again later.',
        });
        setCurrentAction(undefined);
      }
    }
  }, [response, liveRecalling]);

  const saveButton = () => {
    if (orderId) {
      setRecalling(false);
      setPerformAction(true);
    }
  };

  const closeModal = () => {
    setCurrentAction(undefined);
  };
  return (
    <CancelationModal
      title="Clear Booking Status"
      description="Are you sure, you want to clear booking status of the Order?"
      actions={
        <CustomCancelAndCompleteAction
          cancelLabel="Cancel"
          onCancel={closeModal}
          completeLabel="Confirm"
          onComplete={saveButton}
        />
      }
    />
  );
};

const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
  justify-content: center;
`;

export default ClearBookingStatus;
