import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { action } from 'storybook/actions';
import {} from 'libphonenumber-js';
import metadata from 'libphonenumber-js/metadata.min.json';
import './PhoneNumber.svelte';
const meta = {
    title: 'Form Elements/Phone Number',
    component: 'm-phone-number',
    subcomponents: { Field: 'm-field' },
    argTypes: {
        size: {
            control: 'inline-radio',
            options: ['s', 'm'],
        },
        defaultcountry: {
            control: 'select',
            options: Object.keys(metadata.countries),
        },
        valid: {
            control: false,
        },
    },
    render: (args) => {
        const onInput = action('input');
        const onChange = action('change');
        const onFocus = action('focus');
        const onBlur = action('blur');
        const onValid = action('valid');
        return html `
      <m-phone-number
        id=${ifDefined(args.id)}
        value=${ifDefined(args.value)}
        defaultcountry=${ifDefined(args.defaultcountry)}
        placeholder=${ifDefined(args.placeholder)}
        size=${ifDefined(args.size)}
        ?isinvalid=${args.isinvalid}
        ?disabled=${args.disabled}
        readonly=${ifDefined(args.readonly)}
        ?prefix=${args.prefix}
        ?flag=${args.flag}
        locale=${ifDefined(args.locale)}
        .countrycodes=${ifDefined(args.countrycodes)}
        @input=${(event) => {
            onInput(event);
        }}
        @change=${(event) => {
            onChange(event);
        }}
        @focus=${(event) => {
            onFocus(event);
        }}
        @blur=${(event) => {
            onBlur(event);
        }}
        @valid=${(event) => {
            onValid(event.detail);
        }}
      ></m-phone-number>
    `;
    },
};
export default meta;
export const Default = {};
export const Size = {
    args: {
        size: 's',
    },
};
export const Invalid = {
    args: {
        isinvalid: true,
        value: '1912',
    },
};
export const NoPrefix = {
    args: {
        prefix: false,
    },
    parameters: {
        docs: {
            source: {
                code: `<m-phone-number prefix="false"></m-phone-number>`,
            },
        },
    },
};
export const NoFlag = {
    args: {
        flag: false,
    },
    parameters: {
        docs: {
            source: {
                code: `<m-phone-number flag="false"></m-phone-number>`,
            },
        },
    },
};
export const Disabled = {
    args: {
        value: '0103948374',
        disabled: true,
    },
};
export const ReadOnly = {
    args: {
        value: '0103948374',
        readonly: true,
    },
};
export const LimitedCountries = {
    args: {
        countrycodes: ['FR', 'US', 'GB', 'DE', 'ES', 'IT'],
    },
    parameters: {
        docs: {
            description: {
                story: 'Limit the country selector to only specific countries instead of showing all available countries.',
            },
        },
    },
};
