import type {Meta, StoryObj} from '@storybook/react';
import FormButtonSubmit from "../../components/UI/Forms/FormButton/FormButtonSubmit";
import FormButtonCancel from "../../components/UI/Forms/FormButton/FormButtonCancel";
import {ReactNode} from "react";
import FormButtonBack from "../../components/UI/Forms/FormButton/FormButtonBack";
import FormButtonPrint from "../../components/UI/Forms/FormButton/FormButtonPrint";
import FormButtonProceed from "../../components/UI/Forms/FormButton/FormButtonProceed";
import FormButtonSave from "../../components/UI/Forms/FormButton/FormButtonSave";
import FormButtonsContainer from "../../components/UI/Forms/FormButton/FormButtonsContainer";

/***
 * BUTTON COMPONENT  MAP
 */
const componentsMap = {
    'submit': FormButtonSubmit,
    'cancel': FormButtonCancel,
    'back': FormButtonBack,
    'print': FormButtonPrint,
    'save': FormButtonSave,
    'proceed': FormButtonProceed,
}


/***
 * THIS COMPONENT WAS DEVELOPED HERE TO HELP WITH PICKING THE BUTTON TYPE FROM THE CONTROL PANEL
 */
type ButtonPickerProps = {
    children: ReactNode
    onClick?: () => void;
    buttonType?: "submit" | "button";
    disabled?: boolean;
    loading?: boolean
    type: keyof typeof componentsMap
}

const ButtonPicker = (args: ButtonPickerProps) => {
    const {type, ...props} = args;
    const ButtonComponent = componentsMap[type]
    return <ButtonComponent {...props} />
}


/***
 * THE BASIC BUTTON STORY - USES THE DEAFAULT EXPORT META
 */
const meta: Meta<typeof ButtonPicker> = {

    title: 'Components/Forms/FormButton',
    component: ButtonPicker,
}
export default meta


/***
 * INDEPENDENT STORY WITH ALL THE BUTTONS
 */
export const AllButtons = {
    render: () => (
        <div className={'d-flex flex-column gap-4'}>
            {
                Object.entries(componentsMap).map(([type, component]) => {

                    const ButtonComponent = component;

                    return (
                        <FormButtonsContainer>
                            <ButtonComponent>{type.toUpperCase()}</ButtonComponent>
                            <ButtonComponent loading>{type.toUpperCase()}</ButtonComponent>
                            <ButtonComponent disabled>{type.toUpperCase()}</ButtonComponent>
                        </FormButtonsContainer>
                    )
                })

            }

        </div>

    ),
}

/***
 * THE BASIC BUTTON STORY - USES THE DEAFAULT EXPORT META
 */
export const CustomButton = {
    args: {
        type: "submit",
        children: 'Hello',
        onClick: () => console.log('clicked'),
        loading: false,
        disabled: false
    },
    argTypes: {
        onClick: {
            action: "onClick",
        },
        type: {
            control: {
                type: "select",
            },
            // CONSTRUCT THE OPTIONS FROM THE KEYS OF componentsMap
            options: Object.keys(componentsMap).reduce((acc: Record<string, string>, key) => {
                acc[key.toUpperCase()] = key
                return acc
            }, {}),

        }
    }
}