// import { Alert } from '@bjsdistribution/dms-component-library';
import React, { useEffect } from 'react';
import styled from 'styled-components';
import {
  CancelAndCompleteAction,
  CancelationModal,
  useApiHook,
} from '@bjsdistribution/dms-component-library';
import { ApiResponse } from '../../../types';
import {
  useCurrentAction,
  useGlobalStateHitAuditLog,
  useLiveRecalling,
  useOrderId,
} from '../../../store';
import { notification } from 'antd';

function RemoveFromRoute(props: any) {
  const [orderId] = useOrderId();
  const [, setCurrentAction] = useCurrentAction();
  const [, setRecalling] = useLiveRecalling();
  const [, setRecallAuditLog] = useGlobalStateHitAuditLog();

  const callOrdersApi = async () => {
    await props?.callOrderAlertsApi();
  };

  const { data: response, setShouldPerformAction: setAction } = useApiHook<{
    data: ApiResponse[];
  }>({
    endpoint: `/orders/${orderId}/remove_from_route/`,
    method: 'POST',
    performAction: false,
  });

  useEffect(() => {
    if (response && response?.data) {
      notification.success({
        message: 'Success',
        description:
          //@ts-ignore
          response?.message || 'Order has been removed successfully',
      });
      callOrdersApi();
      setRecalling(true);
      setRecallAuditLog(true);
      setCurrentAction(undefined);
    }
    if (response?.data === null) {
      notification.error({
        message: 'Error',
        description:
          //@ts-ignore
          response?.error_traceback ||
          'An error has occurred. Please try again later.',
      });
      setCurrentAction(undefined);
    }
  }, [response]);

  const saveButton = () => {
    if (orderId) {
      setAction(true);
    }

    setTimeout(() => {
      setRecalling(false);
      setRecallAuditLog(false);
    }, 2000);
  };

  const closeModal = () => {
    setCurrentAction(undefined);
  };

  return (
    <CancelationModal
      title="Remove from Route"
      description="Are you sure, you want to remove Order from the route?"
      actions={
        <CustomCancelAndCompleteAction
          cancelLabel="Cancel"
          onCancel={closeModal}
          completeLabel="Confirm"
          onComplete={saveButton}
        />
      }
    />
  );
}

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

export default RemoveFromRoute;
