import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { ref } from 'vue';
import { UISteps } from '@/index';

export default {
    title: 'UI/UISteps',
    component: UISteps,
    argTypes: {
        count: {
            control: { type: 'number', min: 1, max: 10 },
        },
        activeStep: {
            control: { type: 'number', min: 0, max: 10 },
        },
        color: {
            control: { type: 'color' },
        },
    },
    args: {
        count: 4,
        activeStep: 2,
        color: '#047BEF',
    },
} as Meta<typeof UISteps>;

export const Default: StoryFn<typeof UISteps> = (args) => ({
    components: { UISteps },
    setup() {
        return { args };
    },
    template: `<UISteps v-bind="args" />`,
});

export const Interactive: StoryFn<typeof UISteps> = (args) => ({
    components: { UISteps },
    setup() {
        const activeStep = ref(args.activeStep);
        const handleClick = (step: number) => {
            activeStep.value = step;
        };
        return { args, activeStep, handleClick };
    },
    template: `
        <div>
            <UISteps
                v-bind="args"
                :active-step="activeStep"
                @click="handleClick"
            />
            <p style="margin-top: 12px; font-size: 14px; color: #666;">
                Активный шаг: {{ activeStep }} / {{ args.count }}
            </p>
        </div>
    `,
});

export const AllCompleted: StoryFn<typeof UISteps> = (args) => ({
    components: { UISteps },
    setup() {
        return { args };
    },
    template: `<UISteps v-bind="args" :active-step="args.count" />`,
});

export const FirstStep: StoryFn<typeof UISteps> = (args) => ({
    components: { UISteps },
    setup() {
        return { args };
    },
    template: `<UISteps v-bind="args" :active-step="1" />`,
});

export const CustomColor: StoryFn<typeof UISteps> = (args) => ({
    components: { UISteps },
    setup() {
        return { args };
    },
    template: `
        <div style="display: flex; flex-direction: column; gap: 16px;">
            <UISteps v-bind="args" color="#047BEF" :active-step="2" />
            <UISteps v-bind="args" color="#22C55E" :active-step="3" />
            <UISteps v-bind="args" color="#EF4444" :active-step="1" />
            <UISteps v-bind="args" color="#F59E0B" :active-step="4" />
        </div>
    `,
});