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' },
    clearButton: { control: 'boolean' },
    maxlength: { control: 'number' },
  },
  args: {
    label: 'Personnummer',
    meta: '',
    disabled: false,
    optional: false,
    valid: undefined,
    invalidMessage: undefined,
    allowCoordinationNumber: true,
    allowInterimNumber: true,
    clearButton: false,
    maxlength: undefined,
  },
}

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 InvalidWithoutMessage: Story = {
  args: {
    valid: false,
    invalidMessage: '',
  },
  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>
    `,
  }),
}

export const WithClearButton: Story = {
  args: {
    clearButton: true,
    maxlength: 12,
  },
  render: (args) => ({
    components: { FdsSsn },
    setup() {
      const ssn = ref('198507099805')
      const ssnValid = ref<boolean | null>(null)
      const cleared = ref(false)
      const clearInput = () => {
        cleared.value = true
      }
      return { args, ssn, ssnValid, cleared, clearInput }
    },
    template: `
      <div>
        <FdsSsn
          v-bind="args"
          v-model="ssn"
          @valid="ssnValid = $event"
          @clearInput="clearInput"
        />
        <p class="mt-4 text-sm">v-model: {{ ssn || '—' }}</p>
        <p class="text-sm">valid: {{ ssnValid }}</p>
        <p class="text-sm">cleared: {{ cleared }}</p>
      </div>
    `,
  }),
}