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

export default {
    title: 'UI/UISelect',
    component: UISelect,
    argTypes: {
        showSearchInput: {
            control: { type: 'boolean' },
            defaultValue: true,
        },
        useShortLabel: {
            control: { type: 'boolean' },
            description: 'Показывать shortLabel в триггере вместо label (если shortLabel задан у опции)',
            defaultValue: false,
        },
        modalLabel: {
            control: { type: 'text' },
            description: 'Заголовок модального окна. Если не передан — используется label',
        },
    },
} as Meta<typeof UISelect>;

const Template: StoryFn<typeof UISelect> = (args) => ({
    components: {
        UIButton,
        UISelect,
        UIModalContainer,
    },
    setup() {
        const selected = ref<ISelectOption | null>(null);
        const { openModal } = useUIModalStore();

        const options = Array.from({ length: 50 }, (_, i) => ({
            label: `Option ${i + 1}`,
            value: i + 1,
        }));

        const handleOpenSelect = () => {
            openModal({
                component: defineAsyncComponent(
                    () => import('@/UI-kit/components/UI/select/components/List.vue'),
                ),
                modalProps: {
                    isHaveCloseModal: true,
                    isShowXBtn: true,
                    title: 'Выбор опции',
                    position: ModalPositionTypes.BOTTOM,
                    fixedHeight: true,
                },
                componentProps: {
                    options,
                    showSearchInput: args.showSearchInput,
                    placeholderSearchInput: 'Поиск...',
                },
                listeners: {
                    select: (option: ISelectOption) => {
                        selected.value = option;
                    },
                },
            });
        };

        const getSelectedLabel = () => {
            return selected.value?.label ?? 'Выберите значение';
        };

        return {
            selected,
            handleOpenSelect,
            getSelectedLabel,
        };
    },
    template: `
        <div style="max-width: 300px">
            <div class="ui-select" style="position: relative;
                display: flex;
                width: 100%;
                height: 48px;
                padding: 16px 14px;
                background: white;
                color: gray;
                border: 1px solid gray;
                border-radius: 8px;
                text-align: left;
                box-sizing: border-box;
                justify-content: space-between;
                outline: 0;
                cursor: pointer;
                transition: all 0.25s;" @click="handleOpenSelect">
                <span class="ui-select__value">{{ getSelectedLabel() }}</span>
                <svg
                    class="ui-select__arrow"
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M4 6L8 10L12 6"
                        stroke="#999999"
                        stroke-width="1.5"
                        stroke-linecap="round"
                    />
                </svg>
            </div>
            <p style="margin-top: 10px;">Выбрано: {{ selected }}</p>
        </div>

        <UIModalContainer />
    `,
});

export const DefaultSelect = Template.bind({});
DefaultSelect.args = {
    showSearchInput: true,
};

const optionsWithShortLabel: ISelectOption[] = [
    { label: '+7 Россия', shortLabel: '+7', value: '+7' },
    { label: '+998 Узбекистан', shortLabel: '+998', value: '+998' },
    { label: '+375 Беларусь', shortLabel: '+375', value: '+375' },
    { label: '+7 Казахстан', shortLabel: '+7KZ', value: '+7KZ' },
];

const ShortLabelTemplate: StoryFn<typeof UISelect> = (args) => ({
    components: { UISelect, UIModalContainer },
    setup() {
        const value = ref<string | null>(null);
        return { value, args, optionsWithShortLabel };
    },
    template: `
        <div style="max-width: 300px">
            <UISelect
                v-model="value"
                :options="optionsWithShortLabel"
                label="Код страны"
                use-short-label
                :modal-label="args.modalLabel"
            />
            <p style="margin-top: 10px;">Значение: {{ value }}</p>
        </div>
        <UIModalContainer />
    `,
});

export const WithShortLabel = ShortLabelTemplate.bind({});
WithShortLabel.args = {
    modalLabel: 'Выберите код страны',
};
WithShortLabel.storyName = 'С shortLabel (триггер показывает краткий код)';
