import type {Meta, StoryObj} from "@storybook/react";
import CustomTextField from "../../components/UI/Forms/CustomTextField/CustomTextField";
import {useArgs} from "@storybook/preview-api";
import NarrowContainer from "../../components/UI/Layout/NarrowContainer";
import CustomFormSection from "../../components/UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../components/UI/Forms/CustomLabel/CustomLabel";

/**
 * Refactors needed:
 *
 * * maybe instead of explicity declaring every Input props, extend the Input props,
 * so it can take any input prop
 *
 *
 */
const meta = {
    title: 'Components/Forms/CustomTextField',
    component: CustomTextField,
} satisfies Meta<typeof CustomTextField>;

export default meta;

type Story = StoryObj<typeof meta>;

export const CustomTextFieldEx: Story = {
    render: (args) => {

        const [{value}, updateArgs] = useArgs();

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

        return (
            <NarrowContainer>
                <CustomFormSection>
                    <div className="row">
                        <div className="col-4">
                            <CustomLabel>
                                the label
                            </CustomLabel>
                            <CustomTextField {...args} onChange={handleChange}/>
                        </div>
                    </div>
                </CustomFormSection>
            </NarrowContainer>
        )
    },
    args: {
        type: 'text',
        placeholder: 'Enter text',
        onChange: () => console.log('cl')
    },
    parameters: {
        controls: {
            exclude: ['onChange', 'ref']
        }
    }
};