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

import { Textarea as NychTextarea } from '@nychthemeron/library'

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { NychTextarea },
    setup() {
      const value = ref('')
      return { value }
    },
    template: `<NychTextarea v-model="value" rows="4" placeholder="Inscribe your oath…" style="width: 22rem;" />`,
  }),
}

export const Filled: Story = {
  render: () => ({
    components: { NychTextarea },
    setup() {
      const value = ref(
        'Whoever crosses the Styx leaves the world of light behind, and is bound to the laws of the deep.',
      )
      return { value }
    },
    template: `<NychTextarea v-model="value" rows="4" style="width: 22rem;" />`,
  }),
}

export const Disabled: Story = {
  render: () => ({
    components: { NychTextarea },
    setup() {
      const value = ref('This scroll is sealed.')
      return { value }
    },
    template: `<NychTextarea v-model="value" rows="4" disabled style="width: 22rem;" />`,
  }),
}