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

const meta: Meta<typeof FdsSsn> = {
  title: 'FDS/Form/FdsSsn',
  component: FdsSsn,
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    meta: { control: 'text' },
    disabled: { control: 'boolean' },
    optional: { control: 'boolean' },
    valid: { control: 'select', options: [undefined, true, false, null] },
    invalidMessage: { control: 'text' },
    allowCoordinationNumber: { control: 'boolean' },
    allowInterimNumber: { control: 'boolean' },
  },
  args: {
    label: 'Personnummer',
    meta: '',
    disabled: false,
    optional: false,
    valid: undefined,
    invalidMessage: 'Ange ett giltigt personnummer',
    allowCoordinationNumber: true,
    allowInterimNumber: true,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { FdsSsn },
    setup() {
      const ssn = ref('')
      const ssnValid = ref<boolean | null>(null)
      return { args, ssn, ssnValid }
    },
    template: `
      <div>
        <FdsSsn
          v-bind="args"
          v-model="ssn"
          @valid="ssnValid = $event"
        />
        <p class="mt-4 text-sm">v-model: {{ ssn || '—' }}</p>
        <p class="text-sm">valid: {{ ssnValid }}</p>
      </div>
    `,
  }),
}

export const InvalidValue: Story = {
  args: {
    valid: false,
  },
  render: (args) => ({
    components: { FdsSsn },
    setup() {
      const ssn = ref('198501011234')
      return { args, ssn }
    },
    template: `
      <FdsSsn v-bind="args" v-model="ssn" />
    `,
  }),
}

export const ValidPersonnummer: Story = {
  render: (args) => ({
    components: { FdsSsn },
    setup() {
      const ssn = ref('198507099805')
      return { args, ssn }
    },
    template: `
      <FdsSsn v-bind="args" v-model="ssn" />
    `,
  }),
}

export const CoordinationNumber: Story = {
  args: {
    allowCoordinationNumber: true,
  },
  render: (args) => ({
    components: { FdsSsn },
    setup() {
      const ssn = ref('198506698805')
      const ssnValid = ref<boolean | null>(null)
      return { args, ssn, ssnValid }
    },
    template: `
      <div>
        <FdsSsn
          v-bind="args"
          v-model="ssn"
          @valid="ssnValid = $event"
        />
        <p class="mt-4 text-sm">valid: {{ ssnValid }}</p>
      </div>
    `,
  }),
}

export const InterimNumber: Story = {
  args: {
    allowInterimNumber: true,
  },
  render: (args) => ({
    components: { FdsSsn },
    setup() {
      const ssn = ref('19850709T125')
      const ssnValid = ref<boolean | null>(null)
      return { args, ssn, ssnValid }
    },
    template: `
      <div>
        <FdsSsn
          v-bind="args"
          v-model="ssn"
          @valid="ssnValid = $event"
        />
        <p class="mt-4 text-sm">valid: {{ ssnValid }}</p>
      </div>
    `,
  }),
}