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

function ReleaseOrder() {
  const [orderId] = useOrderId();
  const [, setCurrentAction] = useCurrentAction();
  const [, setRecalling] = useLiveRecalling();

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

  useEffect(() => {
    if (response && response?.data) {
      notification.success({
        message: 'Success',
        //@ts-ignore
        description: response?.message || 'Successfully updated',
      });
      setCurrentAction(undefined);
      setRecalling(true);
      setTimeout(() => {
        setRecalling(false);
      }, 1000);
    }
    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 = () => {
    setRecalling(false);
    if (orderId) {
      setPerformAction(true);
    }
  };

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

  // <ReleaseContainer>
  //   <Alert
  //     type="info"
  //     title="Release"
  //     description="Order Already Released"
  //     onClose={() => alert(onClose())}
  //     showCloseIcon={true} // Show or hide the close icon
  //     showOkButton={true} // Show or hide the OK button
  //     styleAlert="rounded" // Set the style variant of the alert
  //   />
  // </ReleaseContainer>
  return (
    <CancelationModal
      title="Release Order"
      description="Are you sure, you want to release the Order?"
      actions={
        <CustomCancelAndCompleteAction
          cancelLabel="Cancel"
          onCancel={closeModal}
          completeLabel="Confirm"
          onComplete={saveButton}
        />
      }
    />
  );
}

// const ReleaseContainer = styled.div`
//   top: -114px;
//   right: 81px;
//   opacity: 1;
//   overflow: unset;
//   color: inherit;
//   pointer-events: auto;
//   position: absolute;
//   transform: translate3d(57px, 308px, 0px) scaleX(1);
// `;

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

export default ReleaseOrder;
