import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Info } from "@lucide/vue"
import {
  Tooltip,
  TooltipArrow,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "."
import { Button } from "../button"
import { componentDoc } from "@/lib/storybook"

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Button },
    template: `
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button variant="outline">Hover me</Button>
          </TooltipTrigger>
          <TooltipContent>Tooltip text</TooltipContent>
        </Tooltip>
      </TooltipProvider>
    `,
  }),
}

export const Sides: Story = {
  name: "Sides",
  render: () => ({
    components: { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Button },
    template: `
      <TooltipProvider>
        <div class="flex flex-wrap items-center gap-3">
          <Tooltip>
            <TooltipTrigger as-child><Button variant="outline">Top</Button></TooltipTrigger>
            <TooltipContent side="top">Top side</TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger as-child><Button variant="outline">Right</Button></TooltipTrigger>
            <TooltipContent side="right">Right side</TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger as-child><Button variant="outline">Bottom</Button></TooltipTrigger>
            <TooltipContent side="bottom">Bottom side</TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger as-child><Button variant="outline">Left</Button></TooltipTrigger>
            <TooltipContent side="left">Left side</TooltipContent>
          </Tooltip>
        </div>
      </TooltipProvider>
    `,
  }),
}

export const DelayDuration: Story = {
  name: "Delay Duration",
  render: () => ({
    components: { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Button },
    template: `
      <div class="flex gap-3">
        <TooltipProvider :delay-duration="0">
          <Tooltip>
            <TooltipTrigger as-child><Button variant="outline">0ms</Button></TooltipTrigger>
            <TooltipContent>Instant</TooltipContent>
          </Tooltip>
        </TooltipProvider>
        <TooltipProvider :delay-duration="500">
          <Tooltip>
            <TooltipTrigger as-child><Button variant="outline">500ms</Button></TooltipTrigger>
            <TooltipContent>Default delay</TooltipContent>
          </Tooltip>
        </TooltipProvider>
        <TooltipProvider :delay-duration="1500">
          <Tooltip>
            <TooltipTrigger as-child><Button variant="outline">1500ms</Button></TooltipTrigger>
            <TooltipContent>Slow</TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>
    `,
  }),
}

export const OnIcon: Story = {
  name: "On Icon",
  render: () => ({
    components: { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Button, Info },
    template: `
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button variant="ghost" size="icon" aria-label="Info"><Info /></Button>
          </TooltipTrigger>
          <TooltipContent>Helpful info</TooltipContent>
        </Tooltip>
      </TooltipProvider>
    `,
  }),
}

export const WithArrow: Story = {
  name: "With Arrow",
  render: () => ({
    components: {
      Tooltip,
      TooltipArrow,
      TooltipContent,
      TooltipProvider,
      TooltipTrigger,
      Button,
    },
    template: `
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger as-child><Button variant="outline">Hover</Button></TooltipTrigger>
          <TooltipContent>
            Tooltip with arrow
            <TooltipArrow />
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: {
      Tooltip,
      TooltipArrow,
      TooltipContent,
      TooltipProvider,
      TooltipTrigger,
      Button,
      Info,
    },
    template: `
      <TooltipProvider>
        <div class="space-y-8">
          <section>
            <h3 class="mb-3 text-sm font-semibold opacity-70">Sides</h3>
            <div class="flex flex-wrap items-center gap-3">
              <Tooltip>
                <TooltipTrigger as-child><Button variant="outline">Top</Button></TooltipTrigger>
                <TooltipContent side="top">Top</TooltipContent>
              </Tooltip>
              <Tooltip>
                <TooltipTrigger as-child><Button variant="outline">Right</Button></TooltipTrigger>
                <TooltipContent side="right">Right</TooltipContent>
              </Tooltip>
              <Tooltip>
                <TooltipTrigger as-child><Button variant="outline">Bottom</Button></TooltipTrigger>
                <TooltipContent side="bottom">Bottom</TooltipContent>
              </Tooltip>
              <Tooltip>
                <TooltipTrigger as-child><Button variant="outline">Left</Button></TooltipTrigger>
                <TooltipContent side="left">Left</TooltipContent>
              </Tooltip>
            </div>
          </section>
          <section>
            <h3 class="mb-3 text-sm font-semibold opacity-70">Icon trigger</h3>
            <Tooltip>
              <TooltipTrigger as-child>
                <Button variant="ghost" size="icon" aria-label="Info"><Info /></Button>
              </TooltipTrigger>
              <TooltipContent>Helpful info</TooltipContent>
            </Tooltip>
          </section>
        </div>
      </TooltipProvider>
    `,
  }),
}
