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

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

export default meta;
type Story = StoryObj<typeof meta>;

// Component wrapper for hooks
const ModalWithState = ({
  children,
  ...props
}: {
  children: React.ReactNode;
}) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal {...props} open={isOpen} onClose={() => setIsOpen(false)}>
        {children}
      </Modal>
    </>
  );
};

export const Default: Story = {
  render: () => (
    <ModalWithState>
      <div className="p-6">
        <h2 className="text-lg font-semibold mb-4">Default Modal</h2>
        <p>This is a basic modal with default styling.</p>
      </div>
    </ModalWithState>
  ),
};

export const WithForm: Story = {
  render: () => (
    <ModalWithState>
      <div className="p-6">
        <h2 className="text-lg font-semibold mb-4">Contact Form</h2>
        <form className="space-y-4">
          <input
            type="text"
            placeholder="Your name"
            className="w-full p-2 border rounded"
          />
          <input
            type="email"
            placeholder="Your email"
            className="w-full p-2 border rounded"
          />
          <textarea
            placeholder="Your message"
            className="w-full p-2 border rounded h-24"
          />
          <Button type="submit">Send Message</Button>
        </form>
      </div>
    </ModalWithState>
  ),
};

export const LargeContent: Story = {
  render: () => (
    <ModalWithState>
      <div className="p-6">
        <h2 className="text-lg font-semibold mb-4">Terms and Conditions</h2>
        <div className="max-h-96 overflow-y-auto">
          <p className="mb-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <p className="mb-4">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </p>
          <p className="mb-4">
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.
          </p>
          <p className="mb-4">
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
            officia deserunt mollit anim id est laborum.
          </p>
        </div>
        <div className="flex justify-end space-x-2 mt-4">
          <Button variant="outline">Decline</Button>
          <Button>Accept</Button>
        </div>
      </div>
    </ModalWithState>
  ),
};