import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import "./style.scss";
import { IconButton } from "..";
import { getFirstName } from "../../utils";
const ChevronDropDown = ({ dropdownItemList, onLabelClick, 
// profileImage,
name, dataCyDropdown, dataCyChangePass, dataCySignout, }) => {
    const [listShow, setListShow] = useState(false);
    const toggleListShow = () => {
        setListShow((prevState) => !prevState);
    };
    const selectDataCy = (item) => {
        item === "Change Password" && dataCyChangePass
            ? dataCyChangePass
            : item === "Sign Out" && dataCySignout
                ? dataCySignout
                : "";
    };
    return (_jsx("div", { className: "chevronButtondropdown--container", children: _jsxs("span", { className: "filterButtondropdown--dropdown", children: [_jsxs("div", { children: [_jsx("button", { onClick: toggleListShow, "data-cy": dataCyDropdown, children: _jsx("p", { className: "first-name", children: getFirstName(name) }) }), _jsx("span", { className: "chevronButtondropdown--btn--dropdown", children: _jsx(IconButton, { shape: "circular", onClick: toggleListShow, sizeVariant: "base", color: "orange", variant: "primary", iconType: "arrowDown" }) })] }), _jsx("ul", { className: `filterButtondropdown--dropdown-list-${listShow ? "show" : "hide"}`, children: dropdownItemList.map((item, key) => (_jsx("li", { children: _jsx("button", { onClick: () => {
                                setListShow(false);
                                onLabelClick(item);
                            }, "data-cy": selectDataCy(item), children: item }) }, `${key}-${item}`))) })] }) }));
};
export default ChevronDropDown;
