import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import Select from "../components/Select";
import SelectItem from "../components/SelectItem";
// import styles from "../App.scss";
const meta = {
    title: "DropDown/Select",
    component: Select,
};
export default meta;
const SelectWithHooks = () => {
    const [value, setValue] = useState("Option 1");
    const handleOnChange = (value) => {
        alert(value);
        setValue(value);
    };
    return (_jsx(_Fragment, { children: _jsx(Select, { value: value, onChange: handleOnChange, iconType: "sortUpDownArrows", showIconLeft: true, showIconRight: true, children: _jsxs(_Fragment, { children: [_jsx(SelectItem, { itemValue: "Option 1", children: "Option 1 Option 1 Option 1 Option 1" }), _jsx(SelectItem, { itemValue: "Option 2", className: "testClass2" }), _jsx(SelectItem, { itemValue: "Option 3" }), _jsx(SelectItem, { itemValue: "Option 4" }), _jsx(SelectItem, { itemValue: "Option 5" })] }) }) }));
};
export const Primary = {
    name: "Select",
    args: {
        children: [
            _jsxs(_Fragment, { children: [_jsx(SelectItem, { itemValue: "Option 1", children: "Option 1 Option 1 Option 1 Option 1" }), _jsx(SelectItem, { itemValue: "Option 2", children: "Option 2" }), _jsx(SelectItem, { itemValue: "Option 3", children: "Option 3" }), _jsx(SelectItem, { itemValue: "Option 4", children: "Option 4" })] }),
        ],
        onChange(value) {
            alert(value);
        },
        value: "Option 2",
        colorStyling: "gray",
        disabled: false,
        menuPosition: "left",
        iconSizeLeft: "16",
        iconSizeRight: "16",
        iconType: "bell",
        showIconLeft: true,
        showIconRight: true,
        maxWidth: "100px",
    },
    render: () => (_jsx(_Fragment, { children: _jsx(SelectWithHooks, {}) })),
};
