import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { UIColorName, UISize } from '@/UI-kit/types';
import { UIButton } from '@/index';
import { UIColor } from '@/UI-kit/constants';

export default {
    title: 'UI/UIButton',
    component: UIButton,
    argTypes: {
        isLoading: {
            control: { type: 'boolean' },
        },
        disabled: {
            control: { type: 'boolean' },
        },
        isBoxShadow: {
            control: { type: 'boolean' },
        },
        size: {
            control: { type: 'select' },
            options: Object.values(UISize),
        },
        color: {
            control: { type: 'select' },
            options: Object.values(UIColorName),
        },
        bgColor: {
            control: { type: 'select' },
            options: Object.values(UIColorName),
        },
        loaderBorderColor: {
            control: { type: 'select' },
            options: Object.values(UIColorName),
        },
    },
    args: {
        size: UISize.M,
        color: UIColorName.White,
        bgColor: UIColorName.GradientBlue,
        loaderBorderColor: 'transparent',
        disabled: false,
        isLoading: false,
        isBoxShadow: true,
    },
} as Meta<typeof UIButton>;

export const DefaultButton: StoryFn<typeof UIButton> = (args) => ({
    components: { UIButton },
    setup() {
        return { args, UIColor };
    },
    template: `<UIButton
        v-bind="args"
        :color="UIColor[args.color]"
        :bg-color="UIColor[args.bgColor]"
        :loader-border-color="UIColor[args.loaderBorderColor]"
    >
        Кнопка
    </UIButton>`,
});
