import type {Meta, StoryObj} from "@storybook/react";
import CustomRadioSelect from "../../components/UI/Forms/CustomSelect/CustomRadioSelect";
import {useArgs} from "@storybook/preview-api";
import {fakeFullName} from "../../services/factories/general";
import MakeCustomRadioSelect from "../../components/UI/Forms/CustomSelect/MakeCustomRadioSelect";
import {selectOptionFactory} from "./CustomSelect.stories";



const meta = {
    title: 'Components/Forms/CustomRadioSelect',
    // @ts-ignore
    component: CustomRadioSelect,

} satisfies Meta<typeof MakeCustomRadioSelect>;

export default meta;

type Story = StoryObj<typeof meta>;

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

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

        function handleChange(s:string) {
            updateArgs({value : s});
        }

        return <MakeCustomRadioSelect {...args} options={selectOptionFactory()} handleChange={handleChange}/>;
    },
    args: {
        value: 1,
        children: [],
        theme: "service-header",
        handleChange: () => {}

    }
};

/**
 * Used in the heade of Applicaiton / Services / Settings as navigation
 */
export const CustomRadioSelectServicesHeaderEx: Story = {
   ...CustomRadioSelectEx,
    args:{
       ...CustomRadioSelectEx.args,
        theme: "service-header",
    },
    parameters:{
       controls:{
           exclude: ['theme']
       }
    }
};



/**
 * Used for the filters mainly in Lists with the SearchBar Component
 */
export const CustomRadioSelectSearchFiltersHeaderEx: Story = {
    ...CustomRadioSelectEx,
    args:{
        ...CustomRadioSelectEx.args,
        theme: "search-listbox",
    },
    parameters:{
        controls:{
            exclude: ['theme']
        }
    }
};

/**
 * Used in DPASS to when checking out people from a group
 */
export const CustomRadioSelectMassExodusEx: Story = {
    ...CustomRadioSelectEx,
    args:{
        ...CustomRadioSelectEx.args,
        theme: "mass-exodus",
    },
    parameters:{
        controls:{
            exclude: ['theme']
        }
    }
};


/**
 * Do not remember where this is used
 */
export const CustomRadioSelectFormOptionseaderEx: Story = {
    ...CustomRadioSelectEx,
    args:{
        ...CustomRadioSelectEx.args,
        theme: "form-options",
    },
    parameters:{
        controls:{
            exclude: ['theme']
        }
    }
};