import type { Meta, StoryObj } from "@storybook/vue3-vite"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "."
import { Button } from "../button"
import { Input } from "../input"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Sheet",
  component: Sheet,
  tags: ["autodocs"],
  parameters: componentDoc("Sheet"),
} satisfies Meta<typeof Sheet>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: {
      Sheet,
      SheetClose,
      SheetContent,
      SheetDescription,
      SheetFooter,
      SheetHeader,
      SheetTitle,
      SheetTrigger,
      Button,
    },
    template: `
      <Sheet>
        <SheetTrigger as-child>
          <Button variant="outline">Open Sheet</Button>
        </SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Right side sheet</SheetTitle>
            <SheetDescription>
              The default side is right.
            </SheetDescription>
          </SheetHeader>
          <div class="py-4">Sheet body content.</div>
          <SheetFooter>
            <SheetClose as-child>
              <Button variant="outline">Cancel</Button>
            </SheetClose>
            <Button>Save</Button>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    `,
  }),
}

export const SideLeft: Story = {
  name: "Side: Left",
  render: () => ({
    components: {
      Sheet,
      SheetContent,
      SheetDescription,
      SheetHeader,
      SheetTitle,
      SheetTrigger,
      Button,
    },
    template: `
      <Sheet>
        <SheetTrigger as-child><Button variant="outline">Open Left</Button></SheetTrigger>
        <SheetContent side="left">
          <SheetHeader>
            <SheetTitle>Left sheet</SheetTitle>
            <SheetDescription>Slides in from the left.</SheetDescription>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    `,
  }),
}

export const SideRight: Story = {
  name: "Side: Right",
  render: () => ({
    components: {
      Sheet,
      SheetContent,
      SheetDescription,
      SheetHeader,
      SheetTitle,
      SheetTrigger,
      Button,
    },
    template: `
      <Sheet>
        <SheetTrigger as-child><Button variant="outline">Open Right</Button></SheetTrigger>
        <SheetContent side="right">
          <SheetHeader>
            <SheetTitle>Right sheet</SheetTitle>
            <SheetDescription>Slides in from the right.</SheetDescription>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    `,
  }),
}

export const SideTop: Story = {
  name: "Side: Top",
  render: () => ({
    components: {
      Sheet,
      SheetContent,
      SheetDescription,
      SheetHeader,
      SheetTitle,
      SheetTrigger,
      Button,
    },
    template: `
      <Sheet>
        <SheetTrigger as-child><Button variant="outline">Open Top</Button></SheetTrigger>
        <SheetContent side="top">
          <SheetHeader>
            <SheetTitle>Top sheet</SheetTitle>
            <SheetDescription>Slides in from the top.</SheetDescription>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    `,
  }),
}

export const SideBottom: Story = {
  name: "Side: Bottom",
  render: () => ({
    components: {
      Sheet,
      SheetContent,
      SheetDescription,
      SheetHeader,
      SheetTitle,
      SheetTrigger,
      Button,
    },
    template: `
      <Sheet>
        <SheetTrigger as-child><Button variant="outline">Open Bottom</Button></SheetTrigger>
        <SheetContent side="bottom">
          <SheetHeader>
            <SheetTitle>Bottom sheet</SheetTitle>
            <SheetDescription>Slides in from the bottom.</SheetDescription>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    `,
  }),
}

export const WithForm: Story = {
  name: "With Form",
  render: () => ({
    components: {
      Sheet,
      SheetClose,
      SheetContent,
      SheetDescription,
      SheetFooter,
      SheetHeader,
      SheetTitle,
      SheetTrigger,
      Button,
      Input,
    },
    template: `
      <Sheet>
        <SheetTrigger as-child>
          <Button>Edit Profile</Button>
        </SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Edit profile</SheetTitle>
            <SheetDescription>Update your info.</SheetDescription>
          </SheetHeader>
          <div class="grid gap-3 py-4">
            <Input default-value="Jane Doe" />
            <Input default-value="jane@example.com" />
          </div>
          <SheetFooter>
            <SheetClose as-child><Button variant="outline">Cancel</Button></SheetClose>
            <Button>Save</Button>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: {
      Sheet,
      SheetClose,
      SheetContent,
      SheetDescription,
      SheetFooter,
      SheetHeader,
      SheetTitle,
      SheetTrigger,
      Button,
    },
    template: `
      <div class="flex flex-wrap gap-3">
        <Sheet>
          <SheetTrigger as-child><Button variant="outline">Left</Button></SheetTrigger>
          <SheetContent side="left">
            <SheetHeader><SheetTitle>Left</SheetTitle></SheetHeader>
          </SheetContent>
        </Sheet>
        <Sheet>
          <SheetTrigger as-child><Button variant="outline">Right</Button></SheetTrigger>
          <SheetContent side="right">
            <SheetHeader><SheetTitle>Right</SheetTitle></SheetHeader>
          </SheetContent>
        </Sheet>
        <Sheet>
          <SheetTrigger as-child><Button variant="outline">Top</Button></SheetTrigger>
          <SheetContent side="top">
            <SheetHeader><SheetTitle>Top</SheetTitle></SheetHeader>
          </SheetContent>
        </Sheet>
        <Sheet>
          <SheetTrigger as-child><Button variant="outline">Bottom</Button></SheetTrigger>
          <SheetContent side="bottom">
            <SheetHeader><SheetTitle>Bottom</SheetTitle></SheetHeader>
          </SheetContent>
        </Sheet>
      </div>
    `,
  }),
}
