import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Trash2, UserPlus } from "@lucide/vue"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "."
import { Button } from "../button"
import { Input } from "../input"
import { componentDoc } from "@/lib/storybook"

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: {
      Dialog,
      DialogClose,
      DialogContent,
      DialogDescription,
      DialogFooter,
      DialogHeader,
      DialogTitle,
      DialogTrigger,
      Button,
    },
    template: `
      <Dialog>
        <DialogTrigger as-child>
          <Button variant="outline">Edit Profile</Button>
        </DialogTrigger>
        <DialogContent class="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Edit Profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you're done.
            </DialogDescription>
          </DialogHeader>
          <div class="py-4">
            <p class="text-sm text-muted-foreground">
              Your profile settings will be updated across all devices.
            </p>
          </div>
          <DialogFooter>
            <DialogClose as-child>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button>Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    `,
  }),
}

export const WithForm: Story = {
  name: "With Form",
  render: () => ({
    components: {
      Dialog,
      DialogClose,
      DialogContent,
      DialogDescription,
      DialogFooter,
      DialogHeader,
      DialogTitle,
      DialogTrigger,
      Button,
      Input,
      UserPlus,
    },
    template: `
      <Dialog>
        <DialogTrigger as-child>
          <Button><UserPlus /> Create Account</Button>
        </DialogTrigger>
        <DialogContent class="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Create Account</DialogTitle>
            <DialogDescription>
              Enter your details below to create a new account.
            </DialogDescription>
          </DialogHeader>
          <div class="grid gap-4 py-4">
            <Input placeholder="John Doe" />
            <Input type="email" placeholder="john@example.com" />
            <Input type="password" placeholder="Password" />
          </div>
          <DialogFooter>
            <DialogClose as-child>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button type="submit">Create</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    `,
  }),
}

export const Confirmation: Story = {
  name: "Confirmation Dialog",
  render: () => ({
    components: {
      Dialog,
      DialogClose,
      DialogContent,
      DialogDescription,
      DialogFooter,
      DialogHeader,
      DialogTitle,
      DialogTrigger,
      Button,
      Trash2,
    },
    template: `
      <Dialog>
        <DialogTrigger as-child>
          <Button variant="destructive"><Trash2 /> Delete Account</Button>
        </DialogTrigger>
        <DialogContent class="sm:max-w-[400px]">
          <DialogHeader>
            <DialogTitle>Are you sure?</DialogTitle>
            <DialogDescription>
              This action cannot be undone. This will permanently delete your account.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose as-child>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button variant="destructive">Delete</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    `,
  }),
}

export const Sizes: Story = {
  name: "Sizes",
  render: () => ({
    components: {
      Dialog,
      DialogContent,
      DialogDescription,
      DialogHeader,
      DialogTitle,
      DialogTrigger,
      Button,
    },
    template: `
      <div class="flex flex-wrap gap-3">
        <Dialog>
          <DialogTrigger as-child><Button variant="outline">Small</Button></DialogTrigger>
          <DialogContent class="sm:max-w-sm">
            <DialogHeader>
              <DialogTitle>Small dialog</DialogTitle>
              <DialogDescription>Compact layout.</DialogDescription>
            </DialogHeader>
          </DialogContent>
        </Dialog>
        <Dialog>
          <DialogTrigger as-child><Button variant="outline">Default</Button></DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Default dialog</DialogTitle>
              <DialogDescription>Standard max-w-lg width.</DialogDescription>
            </DialogHeader>
          </DialogContent>
        </Dialog>
        <Dialog>
          <DialogTrigger as-child><Button variant="outline">Large</Button></DialogTrigger>
          <DialogContent class="sm:max-w-2xl">
            <DialogHeader>
              <DialogTitle>Large dialog</DialogTitle>
              <DialogDescription>Wider layout for richer content.</DialogDescription>
            </DialogHeader>
          </DialogContent>
        </Dialog>
        <Dialog>
          <DialogTrigger as-child><Button variant="outline">Full</Button></DialogTrigger>
          <DialogContent class="sm:max-w-4xl">
            <DialogHeader>
              <DialogTitle>Full dialog</DialogTitle>
              <DialogDescription>Designed for dashboards.</DialogDescription>
            </DialogHeader>
          </DialogContent>
        </Dialog>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: {
      Dialog,
      DialogClose,
      DialogContent,
      DialogDescription,
      DialogFooter,
      DialogHeader,
      DialogTitle,
      DialogTrigger,
      Button,
      Input,
    },
    template: `
      <div class="space-y-8">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Basic</h3>
          <Dialog>
            <DialogTrigger as-child><Button variant="outline">Open</Button></DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Hello</DialogTitle>
                <DialogDescription>A simple dialog.</DialogDescription>
              </DialogHeader>
              <DialogFooter>
                <DialogClose as-child><Button variant="outline">Close</Button></DialogClose>
                <Button>Continue</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </section>

        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Form</h3>
          <Dialog>
            <DialogTrigger as-child><Button>Edit</Button></DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Edit profile</DialogTitle>
                <DialogDescription>Update your info.</DialogDescription>
              </DialogHeader>
              <div class="grid gap-3 py-4">
                <Input default-value="Jane" />
                <Input default-value="jane@example.com" />
              </div>
              <DialogFooter>
                <DialogClose as-child><Button variant="outline">Cancel</Button></DialogClose>
                <Button>Save</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </section>

        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Destructive</h3>
          <Dialog>
            <DialogTrigger as-child><Button variant="destructive">Delete</Button></DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Are you sure?</DialogTitle>
                <DialogDescription>This cannot be undone.</DialogDescription>
              </DialogHeader>
              <DialogFooter>
                <DialogClose as-child><Button variant="outline">Cancel</Button></DialogClose>
                <Button variant="destructive">Delete</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </section>
      </div>
    `,
  }),
}
