import type { Meta, StoryObj } from '@storybook/vue3-vite';
import ModuleDocuments from '@/modules/documents/ModuleDocuments.vue';
import { IDocsSchemaType } from '@/modules/form/types';
import { string, object } from 'yup';
import { EInputType, ELanguageLocale } from '@/UI-kit/types';
import { UIModalContainer } from '@/index';
import { DocumentsType } from '@/modules/documents/type';
import { useUiKitConfigStore } from '@/configs/store';

const meta: Meta<typeof ModuleDocuments> = {
    title: 'Modules/DocumentForm',
    component: ModuleDocuments,
    tags: ['autodocs'],
    argTypes: {
        isShowDeleteDocBtn: {
            control: 'boolean',
        },
        isShowExampleImage: {
            control: 'boolean',
        },
        isShowNotSaveDocBtn: {
            control: 'boolean',
        },
        isShowSaveImageBlock: {
            control: 'boolean',
        },
        initialValue: {
            control: 'object',
        },
        documentType: {
            control: 'text',
        },
        currentLang: {
            control: 'text',
        },
        customDocsSchemaType: {
            control: 'object',
        },
        onBack: {
            action: 'button',
            description: 'Emitted when form is click not save',
        },
        'onUpdate:document': {
            action: 'submitted',
            description: 'Emitted when form is submitted',
        },
    },
};

export default meta;

type Story = StoryObj<typeof ModuleDocuments>;

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

const defaultFields: IDocsSchemaType[] = [
    {
        name: 'email',
        label: 'Укажи Email',
        type: EInputType.text,
        placeholder: 'example@email.com',
        validateOnChange: false,
        validator: string().email().required('Email обязателен'),
    },
    {
        name: 'password',
        label: 'Пароль',
        type: EInputType.password,
        validateOnChange: false,
        validator: string().min(5, 'Минимум 5 символов').required('Придумай пароль'),
    },
    {
        name: 'select',
        label: 'Выбирай',
        type: EInputType.select,
        select: {
            options: options,
            showSearchInput: true,
            placeholderSearchInput: 'Search...',
        },
        validator: object({
            label: string().required(),
            value: string().required(),
        }).required('Надо что-то выбрать'),
    },
    {
        name: 'gender',
        label: 'Укажи пол',
        type: EInputType.radio,
        radioButtonData: [
            {
                value: 'М',
                label: 'М',
            },
            {
                value: 'Ж',
                label: 'Ж',
            },
        ],
        validator: string().required('Укажи пол'),
    },
];

const mockCountries = [
    { id: 1, name: 'Узбекистан', code: 'UZ' },
    { id: 2, name: 'Таджикистан', code: 'TJ' },
    { id: 3, name: 'Кыргызстан', code: 'KG' },
    { id: 4, name: 'Армения', code: 'AM' },
    { id: 5, name: 'Азербайджан', code: 'AZ' },
    { id: 6, name: 'Казахстан', code: 'KZ' },
    { id: 7, name: 'Молдова', code: 'MD' },
    { id: 8, name: 'Беларусь', code: 'BY' },
];

const mockRegions = [
    { id: 77, name: 'Москва' },
    { id: 78, name: 'Санкт-Петербург' },
    { id: 50, name: 'Московская область' },
    { id: 47, name: 'Ленинградская область' },
    { id: 23, name: 'Краснодарский край' },
    { id: 61, name: 'Ростовская область' },
    { id: 63, name: 'Самарская область' },
    { id: 52, name: 'Нижегородская область' },
    { id: 66, name: 'Свердловская область' },
    { id: 74, name: 'Челябинская область' },
    { id: 54, name: 'Новосибирская область' },
    { id: 16, name: 'Республика Татарстан' },
    { id: 2, name: 'Республика Башкортостан' },
];

export const FsspForm: Story = {
    name: 'ФССП',
    args: {
        documentType: DocumentsType.FSSP,
        isShowExampleImage: false,
        isShowDeleteDocBtn: false,
        isShowNotSaveDocBtn: true,
        currentLang: ELanguageLocale.RU,
    },
    render: (args) => ({
        components: { ModuleDocuments, UIModalContainer },
        setup() {
            const configStore = useUiKitConfigStore();
            configStore.countryList = mockCountries;
            configStore.regionList = mockRegions;

            const handleSubmit = (values: any) => {
                console.log('FSSP form submitted:', values);
                args['onUpdate:document']?.(values);
            };

            return { args, handleSubmit };
        },
        template: `
            <ModuleDocuments
                v-bind="args"
                @submit="handleSubmit"
            />
            <UIModalContainer />
        `,
    }),
};

export const FsspFormPrefilled: Story = {
    name: 'ФССП (заполненная)',
    args: {
        documentType: DocumentsType.FSSP,
        isShowExampleImage: false,
        isShowDeleteDocBtn: true,
        isShowNotSaveDocBtn: true,
        currentLang: ELanguageLocale.RU,
        initialValue: {
            last_name: 'Иванов',
            first_name: 'Иван',
            middle_name: 'Иванович',
            birth_date: '01.01.1990',
            seria: 'FA',
            number: '1234567',
            issue_date: '15.06.2020',
            citizenship: 'uz',
            residence_region: '77',
            sex: 'мужской',
        },
    },
    render: (args) => ({
        components: { ModuleDocuments, UIModalContainer },
        setup() {
            const configStore = useUiKitConfigStore();
            configStore.countryList = mockCountries;
            configStore.regionList = mockRegions;

            const handleSubmit = (values: any) => {
                console.log('FSSP form submitted:', values);
                args['onUpdate:document']?.(values);
            };

            return { args, handleSubmit };
        },
        template: `
            <ModuleDocuments
                v-bind="args"
                @submit="handleSubmit"
            />
            <UIModalContainer />
        `,
    }),
};

export const ModuleDocumentsForm: Story = {
    args: {
        customDocsSchemaType: defaultFields,
        isShowExampleImage: false,
        isShowDeleteDocBtn: false,
        isShowNotSaveDocBtn: false,
        currentLang: ELanguageLocale.RU,
    },
    render: (args) => ({
        components: { ModuleDocuments, UIModalContainer },
        setup() {
            const handleSubmit = (values: any) => {
                console.log('Form submitted with:', values);
                args['onUpdate:document']?.(values);
            };

            return { args, handleSubmit };
        },
        template: `
            <ModuleDocuments
                v-bind="args"
                @submit="handleSubmit"
           />
          <UIModalContainer />
        `,
    }),
};
