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

import { PhoneField } from './PhoneField';

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta: Meta<typeof PhoneField> = {
  title: 'UI kit/Form/PhoneField',
  component: PhoneField,
  tags: ['autodocs'],
  argTypes: { onChange: { action: 'onChange' } },
};

export default meta;
type Story = StoryObj<typeof PhoneField>;

const value = { value: '603123456', countryCode: 'CZ' };
const preferredCountries = [43, 75, 136, 141, 151, 57];
const commonArgs = { value, preferredCountries };

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
export const Default: Story = {
  // More on args: https://storybook.js.org/docs/react/writing-stories/args
  args: {
    label: 'Phone',
    ...commonArgs,
  },
};

export const Disabled: Story = {
  args: {
    label: 'Phone',
    disabled: true,
    ...commonArgs,
  },
};

export const Justify: Story = {
  args: {
    label: 'Phone',
    justify: true,
    ...commonArgs,
  },
};

export const Required: Story = {
  args: {
    label: 'Phone',
    required: true,
    ...commonArgs,
  },
};

export const Tooltip: Story = {
  args: {
    label: 'Phone',
    tooltip: 'This is a tooltip for the phone field.',
    ...commonArgs,
  },
};