import { Modal } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Modal> = {
  title: "Components/Modal",
  component: Modal,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A flexible modal component with customizable sizing, animations, and behavior options. Supports portal rendering, escape key handling, and overlay click dismissal.",
      },
    },
  },
  argTypes: {
    isOpen: {
      control: { type: "boolean" },
      description: "Whether the modal is open",
    },
    title: {
      control: { type: "text" },
      description: "Optional title for the modal header",
    },
    size: {
      control: { type: "select" },
      options: ["xs", "sm", "md", "lg", "xl"],
      description: "Modal size variant",
    },
    animation: {
      control: { type: "select" },
      options: ["popper", "bottomSheet"],
      description: "Animation variant",
    },
    shape: {
      control: { type: "select" },
      options: ["rounded", "square"],
      description: "Shape variant",
    },
    shouldCloseOnEsc: {
      control: { type: "boolean" },
      description: "Whether to close on escape key",
    },
    shouldCloseOnOverlayClick: {
      control: { type: "boolean" },
      description: "Whether to close on overlay click",
    },
  },
  args: {
    isOpen: true,
    title: "Modal Title",
    size: "md",
    animation: "popper",
    shape: "rounded",
    shouldCloseOnEsc: true,
    shouldCloseOnOverlayClick: true,
  },
};

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

export const Default: Story = {
  args: {
    children: (
      <div className="space-y-4">
        <p className="text-gray-600">
          This is a default modal with some content. You can close it by
          clicking the X button, pressing Escape, or clicking outside the modal.
        </p>
        <div className="flex justify-end space-x-2">
          <button className="px-4 py-2 text-gray-600 hover:text-gray-800">
            Cancel
          </button>
          <button className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
            Confirm
          </button>
        </div>
      </div>
    ),
  },
};

export const Small: Story = {
  args: {
    size: "xs",
    children: (
      <div className="text-center">
        <p className="text-gray-600">Small modal content</p>
      </div>
    ),
  },
};

export const Large: Story = {
  args: {
    size: "xl",
    children: (
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Large Modal</h3>
        <p className="text-gray-600">
          This is a large modal that can accommodate more content. It's useful
          for forms, detailed information, or complex layouts.
        </p>
        <div className="grid grid-cols-2 gap-4">
          <div className="rounded bg-gray-100 p-4">Content 1</div>
          <div className="rounded bg-gray-100 p-4">Content 2</div>
        </div>
      </div>
    ),
  },
};

export const BottomSheet: Story = {
  args: {
    animation: "bottomSheet",
    size: "sm",
    className: "top-auto bottom-0 max-w-none rounded-t-lg",
    children: (
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Bottom Sheet</h3>
        <p className="text-gray-600">
          This modal slides up from the bottom, perfect for mobile interfaces.
        </p>
        <div className="space-y-2">
          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
            Option 1
          </button>
          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
            Option 2
          </button>
          <button className="w-full rounded p-3 text-left hover:bg-gray-100">
            Option 3
          </button>
        </div>
      </div>
    ),
  },
};

export const WithoutTitle: Story = {
  args: {
    title: undefined,
    children: (
      <div className="space-y-4">
        <p className="text-gray-600">
          This modal doesn't have a title in the header, but still has a close
          button.
        </p>
      </div>
    ),
  },
};

export const NoCloseButton: Story = {
  args: {
    closeButtonClassName: "hidden",
    children: (
      <div className="space-y-4">
        <p className="text-gray-600">
          This modal doesn't have a close button. You can only close it by
          pressing Escape or clicking outside.
        </p>
      </div>
    ),
  },
};