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

import { Dialog as NychDialog, 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, NychButton },
    setup() {
      const visible = ref(false)
      return { visible }
    },
    template: `
      <div>
        <NychButton label="Summon the Oracle" @click="visible = true" />
        <NychDialog v-model:visible="visible" modal header="Oracle of Delphi" style="width: 28rem;">
          <p style="margin: 0;">
            Seekers travelled from across the Aegean to hear the Pythia speak the
            will of Apollo in riddling verse. Approach, and ask your question.
          </p>
          <template #footer>
            <NychButton label="Withdraw" severity="secondary" @click="visible = false" />
            <NychButton label="Ask" @click="visible = false" />
          </template>
        </NychDialog>
      </div>
    `,
  }),
}

// Rendered open by default so the dialog surface is visible in docs/snapshots.
export const Open: Story = {
  render: () => ({
    components: { NychDialog, NychButton },
    setup() {
      const visible = ref(true)
      return { visible }
    },
    template: `
      <NychDialog v-model:visible="visible" modal header="Passage of the Styx" style="width: 28rem;">
        <p style="margin: 0;">
          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>
        <template #footer>
          <NychButton label="Turn back" severity="secondary" @click="visible = false" />
          <NychButton label="Pay the toll" @click="visible = false" />
        </template>
      </NychDialog>
    `,
  }),
}

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