import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { toast, Toaster, useToast } from "."
import { Button } from "../button"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Toast",
  component: Toaster,
  tags: ["autodocs"],
  parameters: componentDoc("Toaster"),
  argTypes: {
    position: {
      control: "select",
      options: [
        "top-left",
        "top-right",
        "top-center",
        "bottom-left",
        "bottom-right",
        "bottom-center",
      ],
    },
    theme: { control: "select", options: ["light", "dark", "system"] },
    richColors: { control: "boolean" },
    expand: { control: "boolean" },
    closeButton: { control: "boolean" },
  },
} satisfies Meta<typeof Toaster>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { Toaster, Button },
    setup() {
      function show(): void {
        toast("Event has been created")
      }
      return { show }
    },
    template: `
      <div>
        <Toaster />
        <Button @click="show">Show toast</Button>
      </div>
    `,
  }),
}

export const Success: Story = {
  render: () => ({
    components: { Toaster, Button },
    setup() {
      function show(): void {
        toast.success("Saved!")
      }
      return { show }
    },
    template: `
      <div>
        <Toaster />
        <Button variant="outline" @click="show">Success</Button>
      </div>
    `,
  }),
}

export const Error: Story = {
  render: () => ({
    components: { Toaster, Button },
    setup() {
      function show(): void {
        toast.error("Something went wrong")
      }
      return { show }
    },
    template: `
      <div>
        <Toaster />
        <Button variant="outline" @click="show">Error</Button>
      </div>
    `,
  }),
}

export const Warning: Story = {
  render: () => ({
    components: { Toaster, Button },
    setup() {
      function show(): void {
        toast.warning("Hmm, that might cause issues")
      }
      return { show }
    },
    template: `
      <div>
        <Toaster />
        <Button variant="outline" @click="show">Warning</Button>
      </div>
    `,
  }),
}

export const Info: Story = {
  render: () => ({
    components: { Toaster, Button },
    setup() {
      function show(): void {
        toast.info("Did you know?")
      }
      return { show }
    },
    template: `
      <div>
        <Toaster />
        <Button variant="outline" @click="show">Info</Button>
      </div>
    `,
  }),
}

export const WithAction: Story = {
  name: "With Action",
  render: () => ({
    components: { Toaster, Button },
    setup() {
      function show(): void {
        toast("Email archived", {
          action: { label: "Undo", onClick: () => toast("Restored") },
        })
      }
      return { show }
    },
    template: `
      <div>
        <Toaster />
        <Button @click="show">Show with action</Button>
      </div>
    `,
  }),
}

export const Loading: Story = {
  render: () => ({
    components: { Toaster, Button },
    setup() {
      function show(): void {
        toast.loading("Saving...", { duration: 2000 })
      }
      return { show }
    },
    template: `
      <div>
        <Toaster />
        <Button variant="outline" @click="show">Loading</Button>
      </div>
    `,
  }),
}

export const Promise: Story = {
  render: () => ({
    components: { Toaster, Button },
    setup() {
      function show(): void {
        const p = new globalThis.Promise<{ name: string }>(resolve =>
          setTimeout(() => resolve({ name: "Alice" }), 1000),
        )
        toast.promise(p, {
          loading: "Loading...",
          success: (data: { name: string }) => `Welcome, ${data.name}!`,
          error: "Failed",
        })
      }
      return { show }
    },
    template: `
      <div>
        <Toaster />
        <Button variant="outline" @click="show">Run promise</Button>
      </div>
    `,
  }),
}

export const RichColors: Story = {
  name: "Rich Colors",
  render: () => ({
    components: { Toaster, Button },
    setup() {
      return {
        showSuccess: () => toast.success("Saved!"),
        showError: () => toast.error("Failed!"),
        showWarning: () => toast.warning("Watch out!"),
        showInfo: () => toast.info("Just FYI"),
      }
    },
    template: `
      <div>
        <Toaster rich-colors />
        <div class="flex flex-wrap gap-2">
          <Button variant="outline" @click="showSuccess">Success</Button>
          <Button variant="outline" @click="showError">Error</Button>
          <Button variant="outline" @click="showWarning">Warning</Button>
          <Button variant="outline" @click="showInfo">Info</Button>
        </div>
      </div>
    `,
  }),
}

export const WithUseToast: Story = {
  name: "useToast composable",
  render: () => ({
    components: { Toaster, Button },
    setup() {
      const { success, error } = useToast()
      return {
        ok: () => success("Hello from useToast"),
        bad: () => error("Something exploded"),
      }
    },
    template: `
      <div>
        <Toaster />
        <div class="flex gap-2">
          <Button @click="ok">success()</Button>
          <Button variant="outline" @click="bad">error()</Button>
        </div>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Toaster, Button },
    setup() {
      return {
        showDefault: () => toast("Event has been created"),
        showSuccess: () => toast.success("Event saved"),
        showError: () => toast.error("Event could not be saved"),
        showWarning: () => toast.warning("Event may have issues"),
        showInfo: () => toast.info("Event details updated"),
        showLoading: () => toast.loading("Creating..."),
        showWithDescription: () =>
          toast("Event Created", {
            description: "Monday, January 3rd at 6:00pm",
          }),
        showWithAction: () =>
          toast("Email archived", {
            action: { label: "Undo", onClick: () => {} },
          }),
      }
    },
    template: `
      <div class="space-y-6">
        <Toaster />
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Types</h3>
          <div class="flex flex-wrap items-center gap-2">
            <Button variant="outline" @click="showDefault">Default</Button>
            <Button variant="outline" @click="showSuccess">Success</Button>
            <Button variant="outline" @click="showError">Error</Button>
            <Button variant="outline" @click="showWarning">Warning</Button>
            <Button variant="outline" @click="showInfo">Info</Button>
            <Button variant="outline" @click="showLoading">Loading</Button>
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">With content</h3>
          <div class="flex flex-wrap items-center gap-2">
            <Button variant="outline" @click="showWithDescription">Description</Button>
            <Button variant="outline" @click="showWithAction">Action</Button>
          </div>
        </section>
      </div>
    `,
  }),
}
