import {
  Modal,
  ModalDescription,
  ModalHeader,
  ModalTitle,
} from "@/components/ui/modal/modal";
import type { INotifyDialog } from "@/store/notify-store/notify.slice";
import { useNotifyStore } from "@/store/notify-store/use-notify-store";

interface NotifyDialogProps {
  notify: INotifyDialog;
}

const NotifyDialog = (props: NotifyDialogProps) => {
  const { clearNotifies, clearNotify } = useNotifyStore();
  return (
    <Modal
      open
      variant={props.notify.variant}
      header={
        <ModalHeader>
          <ModalTitle className="break-words">{props.notify.title}</ModalTitle>
          <ModalDescription className="break-words">
            {props.notify.message}
          </ModalDescription>
        </ModalHeader>
      }
      footer={<div className="h-[20px]" />}
      onClose={() => {
        props.notify.onClose?.();
        clearNotify(props.notify.title);
        clearNotifies();
      }}
      onCancel={() => {
        props.notify.onClose?.();
        clearNotify(props.notify.title);
        clearNotifies();
      }}
      onOk={() => {
        props?.notify.onConfirm?.();
        clearNotify(props.notify.title);
        clearNotifies();
      }}
    />
  );
};

export default NotifyDialog;