import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { EInputComponentType, EInputInputmode, EInputType } from '@/UI-kit/types';
import { UIInput } from '@/index';
import { UIColor } from '@/UI-kit/constants';

export default {
    title: 'UI/UIInput',
    component: UIInput,
    argTypes: {
        isError: {
            control: { type: 'boolean' },
        },
        disabled: {
            control: { type: 'boolean' },
        },
        readonly: {
            control: { type: 'boolean' },
        },
        masked: {
            control: { type: 'boolean' },
        },
        isCapitalize: {
            control: { type: 'boolean' },
        },
        isDate: {
            control: { type: 'boolean' },
        },
        isShowClear: {
            control: { type: 'boolean' },
        },
        isSetInputFocus: {
            control: { type: 'boolean' },
        },
        component: {
            control: { type: 'select' },
            options: Object.values(EInputComponentType),
        },
        id: {
            control: { type: 'text' },
        },
        label: {
            control: { type: 'text' },
        },
        mask: {
            control: { type: 'text' },
        },
        placeholder: {
            control: { type: 'text' },
        },
        modelValue: {
            control: { type: 'text' },
        },
        errorMessage: {
            control: { type: 'text' },
        },
        delay: {
            control: { type: 'text' },
        },
        type: {
            control: { type: 'select' },
            options: Object.values(EInputType),
        },
        inputmode: {
            control: { type: 'select' },
            options: Object.values(EInputInputmode),
        },
    },
    args: {
        component: EInputComponentType.input,
        id: 'input',
        label: 'label',
        mask: '',
        placeholder: '',
        type: EInputType.text,
        inputmode: EInputInputmode.text,
        modelValue: '',
        errorMessage: '',
        isError: false,
        disabled: false,
        readonly: false,
        masked: false,
        isCapitalize: false,
        isSetInputFocus: false,
        isShowClear: false,
        isDate: false,
        delay: 0,
    },
} as Meta<typeof UIInput>;

export const DefaultButton: StoryFn<typeof UIInput> = (args) => ({
    components: { UIInput },
    setup() {
        return { args, UIColor };
    },
    template: `<UIInput
        v-bind="args"
    >
        Кнопка
    </UIInput>`,
});
