import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'

import {
  Dialog as NychDialog,
  DialogTrigger as NychDialogTrigger,
  DialogContent as NychDialogContent,
  DialogHeader as NychDialogHeader,
  DialogTitle as NychDialogTitle,
  DialogFooter as NychDialogFooter,
  Button as NychButton,
} from '@nychthemeron/library'

const meta = {
  title: 'Components/Dialog',
  component: NychDialog,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof NychDialog>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { NychDialog, NychDialogTrigger, NychDialogContent, NychDialogHeader, NychDialogTitle, NychDialogFooter, NychButton },
    template: `
      <NychDialog>
        <NychDialogTrigger as-child>
          <NychButton>Summon the Oracle</NychButton>
        </NychDialogTrigger>
        <NychDialogContent style="width: 28rem;">
          <NychDialogHeader>
            <NychDialogTitle>Oracle of Delphi</NychDialogTitle>
          </NychDialogHeader>
          <p>
            Seekers travelled from across the Aegean to hear the Pythia speak the
            will of Apollo in riddling verse. Approach, and ask your question.
          </p>
          <NychDialogFooter>
            <NychButton variant="secondary">Withdraw</NychButton>
            <NychButton>Ask</NychButton>
          </NychDialogFooter>
        </NychDialogContent>
      </NychDialog>
    `,
  }),
}

export const Open: Story = {
  render: () => ({
    components: { NychDialog, NychDialogContent, NychDialogHeader, NychDialogTitle, NychDialogFooter, NychButton },
    setup() {
      const open = ref(true)
      return { open }
    },
    template: `
      <NychDialog v-model:open="open">
        <NychDialogContent style="width: 28rem;">
          <NychDialogHeader>
            <NychDialogTitle>Passage of the Styx</NychDialogTitle>
          </NychDialogHeader>
          <p>
            Charon ferries the souls of the dead across the river that divides the
            world of the living from the world of the dead. One obol is required.
          </p>
          <NychDialogFooter>
            <NychButton variant="secondary" @click="open = false">Turn back</NychButton>
            <NychButton @click="open = false">Pay the toll</NychButton>
          </NychDialogFooter>
        </NychDialogContent>
      </NychDialog>
    `,
  }),
}

export const WithoutFooter: Story = {
  render: () => ({
    components: { NychDialog, NychDialogContent, NychDialogHeader, NychDialogTitle },
    setup() {
      const open = ref(true)
      return { open }
    },
    template: `
      <NychDialog v-model:open="open">
        <NychDialogContent style="width: 26rem;">
          <NychDialogHeader>
            <NychDialogTitle>An Omen</NychDialogTitle>
          </NychDialogHeader>
          <p>A crow has settled upon the western gate. Interpret it as you will.</p>
        </NychDialogContent>
      </NychDialog>
    `,
  }),
}