import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { Button } from "../button/button";
import { Modal, ModalDescription, ModalHeader, ModalTitle } from "./modal";
import { useModal } from "./modal.hook";

const meta = {
  title: "UI/Modal",
  component: Modal,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof Modal>;

export default meta;

type Story = StoryObj<typeof Modal>;

export const DefaultModal: Story = {
  render: () => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [open, setOpen] = useState(true);
    const modalHeader = (
      <ModalHeader>
        <ModalTitle>
          Rezervasyonu değiştirme talebi oluşturmak istediğine emin misin?
        </ModalTitle>
        <ModalDescription>
          Seçilen uçak bileti talep oluşturan kişinin onayına gönderilecektir.
        </ModalDescription>
      </ModalHeader>
    );
    const handleCloseModal = () => setOpen(false);
    const handleOpenModal = () => setOpen(true);
    return (
      <>
        <Button variant="primary" onClick={handleOpenModal}>
          Open your pretty Modal{" "}
        </Button>
        <Modal
          open={open}
          header={modalHeader}
          variant="warning"
          onClose={handleCloseModal}
          onCancel={handleCloseModal}
          onOk={handleCloseModal}
        />
      </>
    );
  },
};

/**
 * @desc this modal used with useModal hook.
 */
export const CustomModal: Story = {
  args: {
    /* @desc This parameter works only once when first time. */
    open: false,
    variant: "warning",
    onOkText: "Onayla",
    onCancelText: "Vazgeç",
    title: "Rezervasyonu değiştirme talebi oluşturmak istediğine emin misin?",
    description:
      "Seçilen uçak bileti talep oluşturan kişinin onayına gönderilecektir.",
    closable: false,
  },
  render: ({ open, ...props }) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const { openModal, closeModal, modalOpen } = useModal({ open });

    return (
      <>
        <Button variant="primary" onClick={openModal}>
          Rezervasyonu Değiştir
        </Button>

        <Modal
          {...props}
          open={modalOpen}
          onClose={closeModal}
          onCancel={closeModal}
        />
      </>
    );
  },
};

/**
 * @desc this modal used with useModal hook.
 */
export const CustomModalWithChildren: Story = {
  args: {
    /* @desc This parameter works only once when first time. */
    open: false,
    variant: "error",
    onOkText: "Evet, eminim",
    okVariant: "error",
    onCancelText: "Vazgeç",
    title: "Rezervasyonu değiştirme talebini silmek istediğine emin misin?",
    description: "Seçilen uçak bileti silinecektir. Buna emin misiniz?",
    closable: false,
  },
  render: ({ open, ...props }) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const { openModal, closeModal, modalOpen } = useModal({ open });

    return (
      <>
        <Button variant="primary" onClick={openModal}>
          Rezervasyonu Değiştir
        </Button>

        <Modal
          {...props}
          open={modalOpen}
          onClose={closeModal}
          onCancel={closeModal}
        >
          <div className="text-gray-700">
            Silinecek rezervasyon detayları:
            <br />
            <b>Rezervasyon Kodu:</b> 123456789
            <br />
            <b>Ad Soyad:</b> John Doe
            <br />
            <b>Telefon:</b> 555 555 55 55
            <br />
            <b>E-posta:</b> aaa@aaa.com
            <br />
          </div>
        </Modal>
      </>
    );
  },
};