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

import { InputText as NychInputText } from '@nychthemeron/library'

const meta = {
  title: 'Components/InputText',
  component: NychInputText,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: { type: 'select' },
      options: ['small', undefined, 'large'],
      description: 'Input size',
    },
    placeholder: {
      control: { type: 'text' },
      description: 'Placeholder text',
    },
    disabled: {
      control: { type: 'boolean' },
      description: 'Disable the input',
    },
    invalid: {
      control: { type: 'boolean' },
      description: 'Mark the input as invalid',
    },
  },
} satisfies Meta<typeof NychInputText>

export default meta
type Story = StoryObj<typeof meta>

const modelTemplate = (attrs: string) => ({
  components: { NychInputText },
  setup() {
    const value = ref('')
    return { value }
  },
  template: `<NychInputText v-model="value" ${attrs} />`,
})

export const Default: Story = {
  render: () => modelTemplate('placeholder="Speak, traveller…"'),
}

export const Filled: Story = {
  render: () => ({
    components: { NychInputText },
    setup() {
      const value = ref('Charon')
      return { value }
    },
    template: `<NychInputText v-model="value" />`,
  }),
}

export const Invalid: Story = {
  render: () => modelTemplate('placeholder="Required" invalid'),
}

export const Disabled: Story = {
  render: () => ({
    components: { NychInputText },
    setup() {
      const value = ref('Sealed')
      return { value }
    },
    template: `<NychInputText v-model="value" disabled />`,
  }),
}

export const Sizes: Story = {
  render: () => ({
    components: { NychInputText },
    setup() {
      const a = ref('')
      const b = ref('')
      const c = ref('')
      return { a, b, c }
    },
    template: `
      <div style="display: flex; flex-direction: column; gap: 1rem; width: 16rem;">
        <NychInputText v-model="a" size="small" placeholder="Small" />
        <NychInputText v-model="b" placeholder="Normal" />
        <NychInputText v-model="c" size="large" placeholder="Large" />
      </div>
    `,
  }),
}