import type { Meta, StoryObj } from "@storybook/vue3-vite"
import {
  Popover,
  PopoverAnchor,
  PopoverArrow,
  PopoverClose,
  PopoverContent,
  PopoverTrigger,
} from "."
import { Button } from "../button"
import { Input } from "../input"
import { componentDoc } from "@/lib/storybook"

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { Popover, PopoverContent, PopoverTrigger, Button, Input },
    template: `
      <Popover>
        <PopoverTrigger as-child>
          <Button variant="outline">Open popover</Button>
        </PopoverTrigger>
        <PopoverContent class="w-80">
          <div class="grid gap-4">
            <div class="space-y-2">
              <h4 class="font-medium leading-none text-foreground">Dimensions</h4>
              <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
            </div>
            <div class="grid gap-2">
              <Input default-value="100%" class="h-8" />
              <Input default-value="25px" class="h-8" />
            </div>
          </div>
        </PopoverContent>
      </Popover>
    `,
  }),
}

export const WithForm: Story = {
  name: "With Form",
  render: () => ({
    components: {
      Popover,
      PopoverContent,
      PopoverTrigger,
      PopoverClose,
      Button,
      Input,
    },
    template: `
      <Popover>
        <PopoverTrigger as-child>
          <Button>Quick edit</Button>
        </PopoverTrigger>
        <PopoverContent class="w-80">
          <form class="grid gap-3">
            <Input placeholder="Name" />
            <Input placeholder="Email" type="email" />
            <div class="flex justify-end gap-2">
              <PopoverClose as-child>
                <Button variant="outline" size="sm">Cancel</Button>
              </PopoverClose>
              <Button size="sm">Save</Button>
            </div>
          </form>
        </PopoverContent>
      </Popover>
    `,
  }),
}

export const AnchoredVsTriggered: Story = {
  name: "Anchored vs Triggered",
  render: () => ({
    components: {
      Popover,
      PopoverAnchor,
      PopoverContent,
      PopoverTrigger,
      Button,
    },
    template: `
      <div class="flex gap-12">
        <Popover>
          <PopoverTrigger as-child><Button variant="outline">Triggered</Button></PopoverTrigger>
          <PopoverContent>Anchored to trigger.</PopoverContent>
        </Popover>
        <Popover>
          <PopoverAnchor>
            <div class="rounded-md border border-dashed p-3 text-sm">Anchor element</div>
          </PopoverAnchor>
          <PopoverTrigger as-child><Button variant="outline" class="ml-4">Open</Button></PopoverTrigger>
          <PopoverContent>Anchored to the dashed box.</PopoverContent>
        </Popover>
      </div>
    `,
  }),
}

export const Sides: Story = {
  name: "Sides",
  render: () => ({
    components: { Popover, PopoverContent, PopoverTrigger, Button },
    template: `
      <div class="grid grid-cols-4 gap-3">
        <Popover>
          <PopoverTrigger as-child><Button variant="outline">Top</Button></PopoverTrigger>
          <PopoverContent side="top">Top side</PopoverContent>
        </Popover>
        <Popover>
          <PopoverTrigger as-child><Button variant="outline">Right</Button></PopoverTrigger>
          <PopoverContent side="right">Right side</PopoverContent>
        </Popover>
        <Popover>
          <PopoverTrigger as-child><Button variant="outline">Bottom</Button></PopoverTrigger>
          <PopoverContent side="bottom">Bottom side</PopoverContent>
        </Popover>
        <Popover>
          <PopoverTrigger as-child><Button variant="outline">Left</Button></PopoverTrigger>
          <PopoverContent side="left">Left side</PopoverContent>
        </Popover>
      </div>
    `,
  }),
}

export const WithArrow: Story = {
  name: "With Arrow",
  render: () => ({
    components: { Popover, PopoverArrow, PopoverContent, PopoverTrigger, Button },
    template: `
      <Popover>
        <PopoverTrigger as-child><Button variant="outline">Open</Button></PopoverTrigger>
        <PopoverContent>
          Tooltip-style popover.
          <PopoverArrow />
        </PopoverContent>
      </Popover>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Popover, PopoverContent, PopoverTrigger, Button, Input },
    template: `
      <div class="space-y-8">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Basic</h3>
          <Popover>
            <PopoverTrigger as-child><Button variant="outline">Open</Button></PopoverTrigger>
            <PopoverContent>Hello from a popover.</PopoverContent>
          </Popover>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Form</h3>
          <Popover>
            <PopoverTrigger as-child><Button>Edit</Button></PopoverTrigger>
            <PopoverContent class="w-80">
              <div class="grid gap-2">
                <Input placeholder="Name" />
                <Button size="sm">Save</Button>
              </div>
            </PopoverContent>
          </Popover>
        </section>
      </div>
    `,
  }),
}
