import type { Meta, StoryFn } from '@storybook/vue3-vite';
import { ModalPositionTypes } from '@/UI-kit/types';
import { UIColor } from '@/UI-kit/constants';
import { useUIModalStore } from '@/UI-kit/store';
import { defineAsyncComponent } from 'vue';
import { UIButton, UIModal, UIModalContainer } from '@/index';

export default {
    title: 'UI/UIModal',
    component: UIModalContainer,
} as Meta<typeof UIModalContainer>;

export const DefaultModal: StoryFn<typeof UIModalContainer> = (args) => ({
    components: { UIModal, UIButton, UIModalContainer },
    setup() {
        const { openModal } = useUIModalStore();

        const open = () => {
            openModal({
                // @ts-ignore
                component: defineAsyncComponent(
                    () => import('@/UI-kit/components/UI/card/UICard.vue'),
                ),
                modalProps: {
                    isHaveCloseModal: true,
                    isShowXBtn: true,
                    title: 'Заголовок',
                    position: ModalPositionTypes.BOTTOM,
                },
            });
        };

        return { args, UIColor, open };
    },
    template: `
        <UIButton @click="open">
            open modal
        </UIButton>
        <UIModalContainer />
    `,
});
