import type { Meta, StoryObj } from '@storybook/vue3'
import FdsSelect from './FdsSelect.vue'

const meta: Meta<typeof FdsSelect> = {
  title: 'FDS/Form/FdsSelect',
  component: FdsSelect,
  tags: ['autodocs'],
  argTypes: {
    modelValue: { control: { type: 'text' } },
    label: { control: { type: 'text' } },
    meta: { control: { type: 'text' } },
    disabled: { control: { type: 'boolean' } },
    optional: { control: { type: 'boolean' } },
    valid: { control: { type: 'select' }, options: ['true', 'false', 'null'] },
    invalidMessage: { control: { type: 'text' } },
    placeholder: { control: { type: 'text' } },
  },
  args: {
    modelValue: '',
    label: 'Välj alternativ',
    meta: undefined,
    disabled: false,
    optional: false,
    valid: null,
    invalidMessage: undefined,
    placeholder: undefined,
    options: [
      { value: 'option1', label: 'Alternativ 1' },
      { value: 'option2', label: 'Alternativ 2' },
      { value: 'option3', label: 'Alternativ 3', disabled: true },
      { value: 'option4', label: 'Alternativ 4' },
    ],
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args: Story['args']) => ({
    components: { FdsSelect },
    setup: () => ({ args }),
    template: `<FdsSelect v-bind="args" />`,
  }),
}

export const Disabled: Story = {
  args: { disabled: true },
  render: (args: Story['args']) => ({
    components: { FdsSelect },
    setup: () => ({ args }),
    template: `<FdsSelect v-bind="args" />`,
  }),
}

export const Invalid: Story = {
  args: {
    valid: false,
    invalidMessage: 'Välj ett giltigt alternativ',
  },
  render: (args: Story['args']) => ({
    components: { FdsSelect },
    setup: () => ({ args }),
    template: `<FdsSelect v-bind="args" />`,
  }),
}

export const Valid: Story = {
  args: {
    valid: true,
    modelValue: 'option1',
  },
  render: (args: Story['args']) => ({
    components: { FdsSelect },
    setup: () => ({ args }),
    template: `<FdsSelect v-bind="args" />`,
  }),
}