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

import { Message as NychMessage } from '@nychthemeron/library'

const meta = {
  title: 'Components/Message',
  component: NychMessage,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    severity: {
      control: { type: 'select' },
      options: ['info', 'success', 'warn', 'error', 'secondary'],
      description: 'Message severity',
    },
    closable: {
      control: { type: 'boolean' },
      description: 'Show a close button',
    },
  },
} satisfies Meta<typeof NychMessage>

export default meta
type Story = StoryObj<typeof meta>

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

export const Success: Story = {
  args: { severity: 'success' },
  render: (args) => ({
    components: { NychMessage },
    setup: () => ({ args }),
    template: `<NychMessage v-bind="args" style="width: 24rem;">The offering was accepted.</NychMessage>`,
  }),
}

export const Warn: Story = {
  args: { severity: 'warn' },
  render: (args) => ({
    components: { NychMessage },
    setup: () => ({ args }),
    template: `<NychMessage v-bind="args" style="width: 24rem;">The ferryman grows impatient.</NychMessage>`,
  }),
}

export const Error: Story = {
  args: { severity: 'error' },
  render: (args) => ({
    components: { NychMessage },
    setup: () => ({ args }),
    template: `<NychMessage v-bind="args" style="width: 24rem;">The gods have refused your plea.</NychMessage>`,
  }),
}

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

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