"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Picker", {
    enumerable: true,
    get: function() {
        return Picker;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _classvarianceauthority = require("class-variance-authority");
const _css = require("../utils/css");
const _sheet = require("../sheet");
const _icon = require("../icon");
const pickerVariants = (0, _classvarianceauthority.cva)("orderly-flex orderly-flex-row orderly-items-stretch orderly-rounded focus-within:orderly-outline orderly-outline-primary orderly-bg-base-700 orderly-text-base-contrast/50", {
    variants: {
        size: {
            small: "orderly-px-2 orderly-h-[26px] orderly-text-3xs",
            default: "orderly-px-3 orderly-h-[40px]",
            large: "orderly-px-6 orderly-py-3"
        },
        fullWidth: {
            true: "orderly-w-full"
        },
        disabled: {
            true: "orderly-opacity-50 orderly-cursor-not-allowed"
        },
        color: {
            // primary: "text-primary",
            default: "orderly-text-base-contract",
            buy: "orderly-text-trade-profit",
            sell: "orderly-text-trade-loss"
        }
    },
    defaultVariants: {
        size: "default",
        color: "default"
    }
});
const Picker = /*#__PURE__*/ (0, _react.forwardRef)(({ size, color, value, label, placeholder, className, options, fullWidth, disabled, ...props }, ref)=>{
    const [open, setOpen] = (0, _react.useState)(false);
    const selectedItem = (0, _react.useMemo)(()=>{
        if (value && !!value.value) {
            return value;
        }
        if (typeof value === "number" || typeof value === "string") {
            const option = options.find((option)=>option.value === value);
            if (option) {
                return option;
            }
        }
    }, [
        value,
        options
    ]);
    const text = (0, _react.useMemo)(()=>{
        if (selectedItem) {
            return selectedItem.label;
        }
        return placeholder || label || "";
    }, [
        selectedItem,
        label,
        placeholder
    ]);
    // @ts-ignore
    const actions = (0, _react.useMemo)(()=>{
        return [
            ...options,
            "---",
            "Cancel"
        ];
    }, [
        options
    ]);
    const triggerRef = (0, _react.useRef)(null);
    const [dropdownWidth, setDropdownWidth] = (0, _react.useState)(218);
    (0, _react.useEffect)(()=>{
        if (triggerRef.current) {
            // @ts-ignore
            const width = triggerRef.current.offsetWidth;
            setDropdownWidth(width);
        }
    }, []);
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_sheet.ActionSheet, {
        actionSheets: actions,
        onOpenChange: setOpen,
        open: open,
        onClose: ()=>setOpen(false),
        // @ts-ignore
        value: selectedItem,
        onValueChange: props.onValueChange,
        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
            className: (0, _css.cn)("orderly-space-x-1 orderly-text-base-contrast/80", pickerVariants({
                size,
                color,
                fullWidth,
                disabled: disabled || options.length === 0,
                className
            })),
            children: [
                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                    className: "orderly-flex-1 orderly-flex orderly-justify-start orderly-items-center orderly-text-inherit",
                    children: text
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                    className: "orderly-flex orderly-items-center",
                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.ArrowIcon, {
                        size: 12,
                        className: "orderly-text-inherit"
                    })
                })
            ]
        })
    });
});

//# sourceMappingURL=picker.js.map