import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Settings, User, Wrench } from "@lucide/vue"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "."
import { componentDoc } from "@/lib/storybook"

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { Tabs, TabsList, TabsTrigger, TabsContent },
    template: `
      <Tabs default-value="account" class="w-96">
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
          <TabsTrigger value="team">Team</TabsTrigger>
        </TabsList>
        <TabsContent value="account">Account settings panel.</TabsContent>
        <TabsContent value="password">Password panel.</TabsContent>
        <TabsContent value="team">Team panel.</TabsContent>
      </Tabs>
    `,
  }),
}

export const Pills: Story = {
  name: "Pills variant",
  render: () => ({
    components: { Tabs, TabsList, TabsTrigger, TabsContent },
    template: `
      <Tabs default-value="a" class="w-96">
        <TabsList variant="pills">
          <TabsTrigger variant="pills" value="a">Apple</TabsTrigger>
          <TabsTrigger variant="pills" value="b">Banana</TabsTrigger>
          <TabsTrigger variant="pills" value="c">Cherry</TabsTrigger>
        </TabsList>
        <TabsContent value="a">Apple content</TabsContent>
        <TabsContent value="b">Banana content</TabsContent>
        <TabsContent value="c">Cherry content</TabsContent>
      </Tabs>
    `,
  }),
}

export const Underline: Story = {
  name: "Underline variant",
  render: () => ({
    components: { Tabs, TabsList, TabsTrigger, TabsContent },
    template: `
      <Tabs default-value="overview" class="w-[32rem]">
        <TabsList variant="underline">
          <TabsTrigger variant="underline" value="overview">Overview</TabsTrigger>
          <TabsTrigger variant="underline" value="reports">Reports</TabsTrigger>
          <TabsTrigger variant="underline" value="analytics">Analytics</TabsTrigger>
        </TabsList>
        <TabsContent value="overview">Overview content</TabsContent>
        <TabsContent value="reports">Reports content</TabsContent>
        <TabsContent value="analytics">Analytics content</TabsContent>
      </Tabs>
    `,
  }),
}

export const WithIcons: Story = {
  name: "With Icons",
  render: () => ({
    components: { Tabs, TabsList, TabsTrigger, TabsContent, User, Settings, Wrench },
    template: `
      <Tabs default-value="profile" class="w-[32rem]">
        <TabsList variant="underline">
          <TabsTrigger variant="underline" value="profile">
            <User class="size-4 mr-2" /> Profile
          </TabsTrigger>
          <TabsTrigger variant="underline" value="settings">
            <Settings class="size-4 mr-2" /> Settings
          </TabsTrigger>
          <TabsTrigger variant="underline" value="advanced">
            <Wrench class="size-4 mr-2" /> Advanced
          </TabsTrigger>
        </TabsList>
        <TabsContent value="profile">Profile content</TabsContent>
        <TabsContent value="settings">Settings content</TabsContent>
        <TabsContent value="advanced">Advanced content</TabsContent>
      </Tabs>
    `,
  }),
}

export const Vertical: Story = {
  name: "Vertical",
  render: () => ({
    components: { Tabs, TabsList, TabsTrigger, TabsContent },
    template: `
      <Tabs default-value="a" orientation="vertical" class="flex gap-4 w-[32rem]">
        <TabsList variant="pills" class="flex-col items-stretch">
          <TabsTrigger variant="pills" value="a">Account</TabsTrigger>
          <TabsTrigger variant="pills" value="b">Billing</TabsTrigger>
          <TabsTrigger variant="pills" value="c">Members</TabsTrigger>
        </TabsList>
        <div class="flex-1">
          <TabsContent value="a">Account content</TabsContent>
          <TabsContent value="b">Billing content</TabsContent>
          <TabsContent value="c">Members content</TabsContent>
        </div>
      </Tabs>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Tabs, TabsList, TabsTrigger, TabsContent },
    template: `
      <div class="space-y-8">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Default</h3>
          <Tabs default-value="a" class="w-96">
            <TabsList>
              <TabsTrigger value="a">A</TabsTrigger>
              <TabsTrigger value="b">B</TabsTrigger>
              <TabsTrigger value="c">C</TabsTrigger>
            </TabsList>
            <TabsContent value="a">Content A</TabsContent>
            <TabsContent value="b">Content B</TabsContent>
            <TabsContent value="c">Content C</TabsContent>
          </Tabs>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Pills</h3>
          <Tabs default-value="a" class="w-96">
            <TabsList variant="pills">
              <TabsTrigger variant="pills" value="a">A</TabsTrigger>
              <TabsTrigger variant="pills" value="b">B</TabsTrigger>
              <TabsTrigger variant="pills" value="c">C</TabsTrigger>
            </TabsList>
            <TabsContent value="a">A</TabsContent>
            <TabsContent value="b">B</TabsContent>
            <TabsContent value="c">C</TabsContent>
          </Tabs>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Underline</h3>
          <Tabs default-value="a" class="w-96">
            <TabsList variant="underline">
              <TabsTrigger variant="underline" value="a">A</TabsTrigger>
              <TabsTrigger variant="underline" value="b">B</TabsTrigger>
              <TabsTrigger variant="underline" value="c">C</TabsTrigger>
            </TabsList>
            <TabsContent value="a">A</TabsContent>
            <TabsContent value="b">B</TabsContent>
            <TabsContent value="c">C</TabsContent>
          </Tabs>
        </section>
      </div>
    `,
  }),
}
