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

import { Alert as NychAlert, AlertTitle as NychAlertTitle, AlertDescription as NychAlertDescription } from '@nychthemeron/library'

const meta = {
  title: 'Components/Alert',
  component: NychAlert,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['info', 'success', 'warning', 'danger', 'secondary'],
    },
    closable: {
      control: { type: 'boolean' },
    },
  },
} satisfies Meta<typeof NychAlert>

export default meta
type Story = StoryObj<typeof meta>

export const Info: Story = {
  args: { variant: 'info' },
  render: (args) => ({
    components: { NychAlert, NychAlertTitle },
    setup: () => ({ args }),
    template: `
      <NychAlert v-bind="args" style="width: 24rem;">
        <NychAlertTitle>The Oracle has spoken.</NychAlertTitle>
      </NychAlert>
    `,
  }),
}

export const Closable: Story = {
  args: { variant: 'info', closable: true },
  render: (args) => ({
    components: { NychAlert, NychAlertTitle },
    setup: () => ({ args }),
    template: `
      <NychAlert v-bind="args" style="width: 24rem;">
        <NychAlertTitle>This omen may be dismissed.</NychAlertTitle>
      </NychAlert>
    `,
  }),
}

export const WithDescription: Story = {
  render: () => ({
    components: { NychAlert, NychAlertTitle, NychAlertDescription },
    template: `
      <NychAlert variant="warning" style="width: 24rem;">
        <NychAlertTitle>The ferryman grows impatient.</NychAlertTitle>
        <NychAlertDescription>One obol is required to cross the Styx.</NychAlertDescription>
      </NychAlert>
    `,
  }),
}

export const AllVariants: Story = {
  render: () => ({
    components: { NychAlert, NychAlertTitle },
    template: `
      <div style="display: flex; flex-direction: column; gap: 0.75rem; width: 24rem;">
        <NychAlert variant="info"><NychAlertTitle>The Oracle has spoken.</NychAlertTitle></NychAlert>
        <NychAlert variant="success"><NychAlertTitle>The offering was accepted.</NychAlertTitle></NychAlert>
        <NychAlert variant="warning"><NychAlertTitle>The ferryman grows impatient.</NychAlertTitle></NychAlert>
        <NychAlert variant="danger"><NychAlertTitle>The gods have refused your plea.</NychAlertTitle></NychAlert>
        <NychAlert variant="secondary"><NychAlertTitle>A neutral notice from the keeper.</NychAlertTitle></NychAlert>
      </div>
    `,
  }),
}