import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { forwardRef, useState } from "react";
import { twJoin, twMerge } from "tailwind-merge";
function fixedForwardRef(render) {
    // @ts-expect-error - This is a hack to make the types work
    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
    return forwardRef(render);
}
export const ConnectSelect = fixedForwardRef(function Select(props, ref) {
    const { items, value, id, onChange, containerClassName, menuClassName, itemClassName, absolutePositionMenu = false, borderRadius = "6px", } = props;
    const [showItems, setShowItems] = useState(false);
    const selectedItem = getItemByValue(value) ?? items[0];
    function onItemClick(item) {
        if (item.disabled)
            return;
        onChange(item.value);
        setShowItems(false);
    }
    function getItemByValue(value) {
        return items.find((item) => item.value === value);
    }
    const itemsToShow = items.filter((item) => item.value !== value);
    return (_jsxs("div", { className: twMerge("border border-gray-200 bg-gray-50 text-gray-800 transition-[border-radius]", absolutePositionMenu && "relative", containerClassName), "data-open": showItems, ref: ref, style: {
            borderRadius: borderRadius,
        }, children: [_jsxs("div", { className: twMerge("flex min-w-[360px] cursor-pointer items-center justify-between pr-3 text-gray-800 outline-none", menuClassName), id: id, onClick: () => setShowItems(!showItems), children: [_jsx(ItemContainer, { ...selectedItem, className: itemClassName }), _jsx(Icon, { className: twJoin("transition", showItems ? "" : "-rotate-90"), name: "ChevronDown" })] }), _jsx("div", { className: twMerge("max-h-0 w-full overflow-hidden bg-inherit transition-[max-height] ease-in-out", showItems && "max-h-screen", absolutePositionMenu && "absolute"), style: {
                    borderRadius: `0 0 ${borderRadius} ${borderRadius}`,
                }, children: itemsToShow.map((item) => (_jsx(ItemContainer, { ...item, className: itemClassName, onItemClick: () => onItemClick(item) }, item.value))) })] }));
});
function ItemContainer(props) {
    const { className, disabled, onItemClick, icon, displayValue, value, description, } = props;
    return (_jsxs("div", { className: twMerge(disabled ? "cursor-not-allowed text-gray-500" : "text-gray-800", "flex size-full cursor-pointer items-center gap-2 bg-inherit py-3 pl-3 text-start outline-none", className), onClick: onItemClick, children: [icon, _jsxs("div", { children: [_jsx("p", { className: "capitalize text-inherit", children: displayValue ?? value.toLowerCase() }), _jsx("p", { className: "text-xs text-gray-600", children: description })] })] }));
}
//# sourceMappingURL=select.js.map