import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Button, Checkbox, Flex, Icon, ListItem, Menu, MenuButton, MenuItem, MenuList, Text, Tooltip, UnorderedList, } from "@chakra-ui/react";
import { ChevronDown } from "@feedloop/icon";
const ArrayPropertyEditor = React.memo(function ArrayPropertyEditor(props) {
    switch (props.propDef.options.format) {
        case "multiple-choices":
        default:
            return (_jsxs(Menu, Object.assign({ isLazy: true }, { children: [_jsx(Tooltip, Object.assign({ label: _jsx(UnorderedList, { children: props.value.map((val) => (_jsx(ListItem, { children: String(val) }, String(val)))) }) }, { children: _jsx(MenuButton, Object.assign({ as: Button, bgColor: "#fff", width: "100%", textAlign: "left", borderRadius: "md", variant: "outline", fontWeight: "normal", fontSize: "sm", pr: "0", _hover: {
                                background: "none",
                                borderColor: "var(--chakra-colors-gray-300)",
                            }, _active: {
                                background: "none",
                                borderColor: "var(--chakra-colors-gray-300)",
                            }, _focus: { shadow: "0px" }, rightIcon: _jsx(Icon, { as: ChevronDown, bg: "white", w: "2rem", fontSize: "xl" }) }, { children: props.value.length
                                ? props.value.join(", ")
                                : props.propDef.options.placeholder })) })), _jsx(MenuList, { children: props.propDef.options.format === "multiple-choices" &&
                            props.propDef.options.options.map((opt) => (_jsx(ChoiceItem, { value: props.value, onChange: props.onChange, item: opt }, opt.value))) })] })));
    }
});
const ChoiceItem = React.memo(function ChoiceItem(props) {
    const isSelected = React.useMemo(() => props.value.includes(props.item.value), [props.value, props.item.value]);
    const handleChange = React.useCallback((e) => {
        e.preventDefault();
        props.onChange(isSelected
            ? props.value.filter((id) => id !== props.item.value)
            : props.value.concat(props.item.value));
    }, [isSelected, props.value, props.item.value, props.onChange]);
    return (_jsx(MenuItem, Object.assign({ onClick: handleChange, closeOnSelect: false, bg: isSelected && "gray.100" }, { children: _jsxs(Flex, { children: [_jsx(Checkbox, { isChecked: isSelected, mr: 2, borderColor: "gray", onChange: handleChange }), _jsx(Text, { children: props.item.label })] }) })));
});
export default ArrayPropertyEditor;
//# sourceMappingURL=array.js.map