import type { Meta, StoryObj } from '@storybook/vue3-vite';
import ModuleForm from '@/modules/form/ModuleForm.vue';
import { IDocsSchemaType } from '@/modules/form/types';
import { string, object } from 'yup';
import { EInputType } from '@/UI-kit/types';
import { UIModalContainer } from '@/index';

const meta: Meta<typeof ModuleForm> = {
    title: 'Modules/Form',
    component: ModuleForm,
    tags: ['autodocs'],
    argTypes: {
        fields: {
            control: 'object',
            description: 'Array of form fields configuration',
        },
        onSubmit: {
            action: 'submitted',
            description: 'Emitted when form is submitted',
        },
    },
};

export default meta;
type Story = StoryObj<typeof ModuleForm>;

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('Укажи пол'),
    },
];

export const Form: Story = {
    args: {
        fields: defaultFields,
    },
    render: (args) => ({
        components: { ModuleForm, UIModalContainer },
        setup() {
            const handleSubmit = (values: any) => {
                console.log('Form submitted with:', values);
                args.onSubmit?.(values);
            };

            return { args, handleSubmit };
        },
        template: `
      <ModuleForm
        :fields="args.fields"
        @submit="handleSubmit"
      >

          <button
            type="submit"
            style="
              background: #4CAF50;
              color: white;
              padding: 10px 20px;
              border: none;
              border-radius: 4px;
              cursor: pointer;
              margin-top: 10px;
            "
          >
            Custom Submit
          </button>
      </ModuleForm>
        <div style="border: 1px solid black; margin: 10px; border-radius: 8px">
            <p style="text-align: center">Данные для формы</p>
            <hr>
            <pre>
                 <code>
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('Укажи пол'),
    },
];


<hr>
Вывод:
{
    "email": "test@ya.ru",
    "password": "12343455",
    "select": {
        "label": "Option 1",
        "value": 1
    },
    "gender": "М"
}
              </code>

            </pre>
        </div>

      <UIModalContainer />
    `,
    }),
};
