import type {Meta, StoryObj} from "@storybook/react";
import CustomFormSection from "../../components/UI/Forms/CustomFormSection/CustomFormSection";
import MakeCustomSelect from "../../components/UI/Forms/CustomSelect/MakeCustomSelect";
import CustomLabel from "../../components/UI/Forms/CustomLabel/CustomLabel";
import {fakeFullName} from "../../services/factories/general";
import {useArgs} from '@storybook/preview-api';

export const selectOptionFactory = (count = 10) => {




    return Array(count).fill(0).map((_, i) => {
        return {
            value: i + 1,
            name: fakeFullName()
        }
    })
}

/**
 * Refactors needed:
 *
 * *there's a minor when the seletc is clearable and u wrote somehitng on search
 * where u have to x buttons (one to clear search and one to clear option)
 *
 * * add types to handleChange function
 *
 *
 */
const meta = {
    title: 'Components/Forms/CustomSelect',
    component: MakeCustomSelect,
} satisfies Meta<typeof MakeCustomSelect>;

export default meta;

type Story = StoryObj<typeof meta>;

const CustomSelectTemplate: Story = {
    render: (args) => {
        const [{value}, updateArgs] = useArgs();

        function handleChange(v: number | string) {
            updateArgs({value: v});
        }

        return (
            <CustomFormSection>
                <div className="row">
                    <div className="col-3">
                        <CustomLabel>
                            Single Custom Select
                        </CustomLabel>
                        <MakeCustomSelect {...args} handleChange={handleChange}/>
                    </div>
                </div>
            </CustomFormSection>
        )
    },
    args: {
        options: selectOptionFactory(),
        handleChange: () => console.log('handleChange'),
        hasError: '',
        isForGate: false,
        clearable: true,
        searchable: true,
        minSearch: 0,
        multiple: false,
        value: 0,
    },
    parameters: {
        controls: {exclude: ['options', 'value', 'handleChange', 'multiple']},
    }
};

export const CustomSelectEx: Story = {
    ...CustomSelectTemplate
};

export const MultipleCustomSelectEx: Story = {
    ...CustomSelectTemplate,
    args: {
        ...CustomSelectTemplate.args,
        multiple: true,
        value: [],
    }
};