"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const core_1 = require("@material-ui/core");
const flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
const utils_1 = require("../utils");
const ArrowRight_1 = tslib_1.__importDefault(require("@material-ui/icons/ArrowRight"));
function WxSelect({ options, onChange, defaultValue, ...rest }) {
    const [value, setValue] = react_1.useState(defaultValue || '');
    const [open, setOpen] = react_1.useState(false);
    const handleItemClick = value => {
        setValue(value);
        setOpen(false);
        onChange(value);
    };
    const onOpen = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };
    return (react_1.default.createElement(core_1.TextField, Object.assign({ select: true, SelectProps: {
            open,
            onOpen,
            MenuProps: { onClose },
            renderValue: value => value,
        }, value: value }, rest),
        options.map(item => {
            if (item.children) {
                return (react_1.default.createElement(NestedItem, { label: item.label || item.value, options: item.children, key: item.value, handleItemClick: handleItemClick }));
            }
            else {
                return (react_1.default.createElement(core_1.MenuItem, { key: item.value, onClick: () => handleItemClick(item.value) }, item.label || item.value));
            }
        }),
        utils_1.flatChildren(options).map(item => (react_1.default.createElement(core_1.MenuItem, { key: item.value, value: item.value, style: { display: 'none' } })))));
}
const NestedItem = react_1.default.forwardRef(({ options, label, handleItemClick }, ref) => {
    const theme = core_1.useTheme();
    const [open, setOpen] = react_1.useState(false);
    const menuItemRef = react_1.useRef(null);
    react_1.useImperativeHandle(ref, () => menuItemRef.current);
    return (react_1.default.createElement(core_1.MenuItem, { ref: menuItemRef, value: flatten_1.default(options).map(i => i.value), style: {
            backgroundColor: open ? theme.palette.action.hover : 'transparent',
        }, onClick: () => setOpen(!open), onMouseLeave: () => {
            setOpen(false);
        }, onMouseEnter: () => {
            setOpen(true);
        } },
        react_1.default.createElement(core_1.Box, { width: "100%", display: "flex", alignItems: "center" },
            react_1.default.createElement(core_1.Box, { flex: 1 }, label),
            react_1.default.createElement(ArrowRight_1.default, { fontSize: "small" })),
        react_1.default.createElement(core_1.Menu, { style: { pointerEvents: 'none', overflow: 'none' }, open: open, onClose: () => setOpen(false), anchorEl: menuItemRef.current, anchorOrigin: {
                vertical: 'top',
                horizontal: 'right',
            }, transformOrigin: {
                vertical: 'top',
                horizontal: 'left',
            }, disableAutoFocus: true, disableEnforceFocus: true, disableRestoreFocus: true },
            react_1.default.createElement("div", { style: { pointerEvents: 'auto' } }, options.map(item => {
                if (item.children) {
                    return (react_1.default.createElement(NestedItem, { key: item.value, label: item.label || item.value, options: item.children, handleItemClick: handleItemClick }));
                }
                else {
                    return (react_1.default.createElement(core_1.MenuItem, { key: item.value, onClick: () => handleItemClick(item.value) }, item.label || item.value));
                }
            })))));
});
exports.default = WxSelect;
