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

const meta: Meta<typeof FdsPhonenumber> = {
  title: 'FDS/Form/FdsPhonenumber',
  component: FdsPhonenumber,
  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' },
    defaultCountry: { control: 'text' },
    locale: { control: 'text' },
    fixedCountry: { control: 'text' },
    hideCountryPicker: { control: 'boolean' },
  },
  args: {
    label: 'Telefonnummer',
    meta: '',
    disabled: false,
    optional: false,
    valid: undefined,
    invalidMessage: 'Ange ett giltigt telefonnummer',
    defaultCountry: 'SE',
    hideCountryPicker: false,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { FdsPhonenumber },
    setup() {
      const number = ref('')
      const country = ref('SE')
      const phoneValid = ref<boolean | null>(null)
      const e164 = ref('')
      return { args, number, country, phoneValid, e164 }
    },
    template: `
      <div>
        <FdsPhonenumber
          v-bind="args"
          v-model="number"
          v-model:country="country"
          @valid="phoneValid = $event"
          @update:e164="e164 = $event"
        />
        <p class="mt-4 text-sm">Nummer: {{ number }}</p>
        <p class="text-sm">Land: {{ country }}</p>
        <p class="text-sm">valid: {{ phoneValid }}</p>
        <p class="text-sm">E.164: {{ e164 || '—' }}</p>
      </div>
    `,
  }),
}

export const InvalidNumber: Story = {
  args: {
    valid: false,
  },
  render: (args) => ({
    components: { FdsPhonenumber },
    setup() {
      const number = ref('123')
      const country = ref('SE')
      return { args, number, country }
    },
    template: `
      <FdsPhonenumber
        v-bind="args"
        v-model="number"
        v-model:country="country"
      />
    `,
  }),
}

export const EnglishLocale: Story = {
  args: {
    locale: 'en',
  },
  render: (args) => ({
    components: { FdsPhonenumber },
    setup() {
      const number = ref('')
      const country = ref('SE')
      return { args, number, country }
    },
    template: `
      <FdsPhonenumber
        v-bind="args"
        v-model="number"
        v-model:country="country"
      />
    `,
  }),
}

export const ValidSwedishNumber: Story = {
  render: (args) => ({
    components: { FdsPhonenumber },
    setup() {
      const number = ref('0701234567')
      const country = ref('SE')
      const e164 = ref('')
      return { args, number, country, e164 }
    },
    template: `
      <div>
        <FdsPhonenumber
          v-bind="args"
          v-model="number"
          v-model:country="country"
          @update:e164="e164 = $event"
        />
        <p class="mt-4 text-sm">E.164: {{ e164 }}</p>
      </div>
    `,
  }),
}

export const FixedCountrySweden: Story = {
  args: {
    fixedCountry: 'SE',
    meta: 'Landskod låst till Sverige — ingen landskatalog eller dropdown.',
  },
  render: (args) => ({
    components: { FdsPhonenumber },
    setup() {
      const number = ref('')
      const country = ref('SE')
      return { args, number, country }
    },
    template: `
      <FdsPhonenumber
        v-bind="args"
        v-model="number"
        v-model:country="country"
      />
    `,
  }),
}