import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { action } from 'storybook/actions';
import './Select.svelte';
const meta = {
    title: 'Form Elements/Select',
    component: 'm-select',
    subcomponents: { Field: 'm-field' },
    argTypes: {
        size: {
            control: 'radio',
            options: ['s', 'm'],
        },
    },
    args: {
        id: 'selectId',
        placeholder: 'Choose an option',
        options: [
            {
                text: 'Option 1',
                value: 'option1',
            },
            {
                text: 'Option 2',
                value: 'option2',
                disabled: true,
            },
            {
                text: 'Option 3',
                value: 'option3',
            },
            {
                text: 'Option 4',
                value: 'option4',
            },
        ],
    },
    render: (args) => {
        const onInput = action('input');
        const onChange = action('change');
        const onFocus = action('focus');
        const onBlur = action('blur');
        return html `
      <m-select
        id=${ifDefined(args.id)}
        name=${ifDefined(args.name)}
        value=${ifDefined(args.value)}
        .options=${ifDefined(args.options)}
        placeholder=${ifDefined(args.placeholder)}
        ?isinvalid=${args.isinvalid}
        ?disabled=${args.disabled}
        size=${ifDefined(args.size)}
        ?readonly=${args.readonly}
        @input=${(event) => {
            onInput(event);
        }}
        @change=${(event) => {
            onChange(event);
        }}
        @focus=${(event) => {
            onFocus(event);
        }}
        @blur=${(event) => {
            onBlur(event);
        }}
      ></m-select>
    `;
    },
};
export default meta;
export const Value = {
    args: {
        id: 'withValueId',
        value: 'option1',
    },
};
export const Default = {};
export const Small = {
    args: {
        id: 'smallId',
        size: 's',
    },
};
export const Disabled = {
    args: {
        id: 'disabledId',
        disabled: true,
    },
};
export const ReadOnly = {
    args: {
        id: 'readonlyId',
        readonly: true,
    },
};
export const Invalid = {
    args: {
        id: 'invalidId',
        isinvalid: true,
    },
};
