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

import CpTelInput from '@/components/CpTelInput.vue'

const telInputSizes = ['md', 'lg'] as const

const meta = {
  title: 'Molecules/CpTelInput',
  component: CpTelInput,
  argTypes: {
    modelValue: {
      control: 'text',
      description: 'The phone number value',
    },
    size: {
      control: 'select',
      options: telInputSizes,
      description: 'The size of the input',
    },
  },
} satisfies Meta<typeof CpTelInput>

export default meta

type Story = StoryObj<typeof meta>

type TelInputStoryArgs = NonNullable<Story['args']>

const defaultRender = (args: TelInputStoryArgs) => ({
  components: { CpTelInput },
  setup() {
    return { args }
  },
  template: `<CpTelInput v-bind="args" />`,
})

/**
 * Default telephone input with a country selector. Use the controls to
 * experiment with each prop in isolation.
 */
export const Default: Story = {
  args: {
    modelValue: '',
  },
  render: defaultRender,
}

/**
 * Pre-select a country via the `defaultCountry` ISO-2 code (e.g. `us`,
 * `fr`, `gb`).
 */
export const WithDefaultCountry: Story = {
  args: {
    defaultCountry: 'us',
  },
  render: defaultRender,
}