"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Menu = exports.isMenuDataObjectItem = void 0;
const react_1 = __importStar(require("react"));
const varsUtilities_1 = require("../../varsUtilities");
const hooks_1 = require("../../hooks");
const components_1 = require("../../components");
const inlines_1 = require("inlines");
const icons_1 = require("../../icons");
const MenuItem_1 = require("./MenuItem");
const utils_1 = require("../../utils");
const MenuItemsHeader = ({ children, style, onClick, id, }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { id: id, style: {
            marginTop: '24px',
            marginBottom: '12px',
            '&.closed': {
                marginBottom: '-12px',
            },
        } },
        react_1.default.createElement(inlines_1.styled.span, { onClick: onClick },
            react_1.default.createElement(components_1.Text, { weight: "strong", color: "default", size: 12, light: true, style: {
                    // marginBottom: 16,
                    display: 'flex',
                    position: 'relative',
                    textTransform: 'uppercase',
                } }, children))));
};
const HideableStyledDiv = (0, inlines_1.styled)('div', {
    display: 'block',
    '&.hidden': {
        display: 'none',
    },
});
const StyledChevron = (0, inlines_1.styled)('div', {
    transition: 'transform 0.2s',
    position: 'absolute',
    right: 12,
    '&.closed ': {
        transform: 'rotate(180deg)',
    },
});
const isMenuDataObject = (data) => {
    return !Array.isArray(data) && !react_1.default.isValidElement(data);
};
const isMenuDataObjectItem = (config) => {
    return (typeof config === 'object' &&
        !Array.isArray(config) &&
        !react_1.default.isValidElement(config));
};
exports.isMenuDataObjectItem = isMenuDataObjectItem;
const toMenuItemObject = (item, key) => {
    if (Array.isArray(item)) {
        return {
            label: key,
            value: key,
            items: item.map((i) => toMenuItemObject(i)),
        };
    }
    else if (typeof item === 'string' || typeof item === 'number') {
        return {
            label: item,
            value: key || item,
        };
    }
    else if (react_1.default.isValidElement(item)) {
        return {
            label: item,
            value: key,
        };
    }
    else {
        // @ts-ignore
        return item;
    }
};
const Menu = ({ config = {}, onChange, active, style, children, header, footer, isActive, collapse, shrinkable, shrunk = false, mobileAllowed = false, }) => {
    const menuDataItems = [];
    const { width } = (0, hooks_1.useWindowResize)();
    const [open, setOpen] = (0, react_1.useState)(!mobileAllowed);
    const [shrink, setShrink] = (0, react_1.useState)(shrunk);
    if (isMenuDataObject(config)) {
        for (const key in config) {
            const item = config[key];
            if ((0, exports.isMenuDataObjectItem)(item)) {
                const items = [];
                for (const itemKey in item) {
                    items.push(toMenuItemObject(item[itemKey], itemKey));
                }
                menuDataItems.push({
                    label: key,
                    value: key,
                    items,
                });
            }
            else {
                menuDataItems.push(toMenuItemObject(item, key));
            }
        }
    }
    else {
        for (const item of config) {
            menuDataItems.push(toMenuItemObject(item));
        }
    }
    (0, react_1.useEffect)(() => {
        if (width > 640 && mobileAllowed) {
            setOpen(false);
        }
    }, [width]);
    const ItemThing = ({ label, icon, items, onClick, i, value, depth }) => {
        if (items) {
            return (react_1.default.createElement("div", { style: {
                    // width: `calc(100% - ${depth * 20}px)`,
                    width: '100%',
                    paddingLeft: depth * 20,
                } },
                items.length > 0 && !shrink && (react_1.default.createElement(MenuItemsHeader, { id: `${i}-menuheader`, style: {
                        marginTop: i && 36,
                        justifyContent: collapse ? 'space-between' : 'unset',
                        display: collapse ? 'flex' : 'flex',
                        marginBottom: '12px',
                    }, onClick: (e) => {
                        if (onClick) {
                            onClick(e);
                        }
                        if (collapse) {
                            // @ts-ignore FIX THIS
                            e.currentTarget.parentNode.nextSibling.classList.toggle('hidden');
                            // @ts-ignore FIX THIS
                            e.currentTarget.parentNode?.childNodes[0]?.childNodes[0]?.childNodes[1]?.classList.toggle('closed');
                        }
                    } },
                    icon ? react_1.default.createElement(inlines_1.styled.div, null, icon) : null,
                    react_1.default.createElement(components_1.Text, { light: true, selectable: "none", weight: "strong", size: 12, transform: "uppercase" }, label),
                    collapse && !shrink && (react_1.default.createElement(StyledChevron, { id: `${i}-menuchevron` },
                        react_1.default.createElement(icons_1.IconChevronDown, null))))),
                react_1.default.createElement(HideableStyledDiv, { id: `${i}-menuitems`, style: {
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'flex-end',
                        alignItems: 'flex-start',
                    } }, items.map(({ label, icon, items, onClick, value }, i) => {
                    return (react_1.default.createElement(ItemThing, { key: i + label + depth, depth: depth + 1, value: value, label: label, icon: icon, onClick: onClick, i: i, items: items }));
                }))));
        }
        return (react_1.default.createElement(MenuItem_1.MenuItem, { key: i + label + depth, value: value, label: label, icon: icon, onClick: () => setOpen(false), onChange: onChange, active: isActive ? isActive(value) : active === value, shrink: shrink }));
    };
    // console.log(menuDataItems)
    const items = menuDataItems.map(({ label, icon, items, onClick, value }, i) => {
        return (react_1.default.createElement(ItemThing, { key: Math.random(), depth: 0, value: value, label: label, icon: icon, onClick: onClick, i: i, items: items }));
    });
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(inlines_1.styled.div, { style: {
                position: 'fixed',
                right: 12,
                top: 24,
                height: 'fit-content',
                display: 'none',
                [true ? utils_1.BpSmall : null]: {
                    display: open ? 'none' : 'block',
                },
            } },
            react_1.default.createElement(components_1.Button, { color: "system", icon: open ? react_1.default.createElement(icons_1.IconClose, null) : react_1.default.createElement(icons_1.IconMenu, null), size: "small", onClick: () => {
                    setOpen(!open);
                } })),
        shrinkable && open && (react_1.default.createElement(inlines_1.styled.div, { onClick: () => setShrink(!shrink), style: {
                width: 8,
                background: 'transparent',
                position: 'absolute',
                height: '100%',
                cursor: 'pointer',
                right: 0,
                left: !shrink ? 240 : 58,
                transition: '0.3s all',
                zIndex: 2,
                '& div': {
                    display: 'none',
                },
                '&:hover': {
                    '& div': {
                        display: 'flex',
                    },
                },
                [mobileAllowed ? utils_1.BpSmall : null]: {
                    left: !shrink ? '272px' : '62px',
                    '& div': {
                        display: 'flex',
                    },
                },
            } },
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    position: 'relative',
                    top: '50%',
                    transform: 'translateY(-50%)',
                    padding: 3,
                    borderRadius: 32,
                    // display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: 16,
                    height: 16,
                    marginLeft: -4,
                    backgroundColor: (0, varsUtilities_1.color)('background', 'default', 'muted'),
                    border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal', 'default')} `,
                    '& svg': {
                        width: '12px',
                        height: '12px',
                    },
                } }, !shrink ? react_1.default.createElement(icons_1.IconChevronLeft, null) : react_1.default.createElement(icons_1.IconChevronRight, null)))),
        react_1.default.createElement(components_1.ScrollArea, { style: {
                display: 'block',
                flexShrink: 0,
                backgroundColor: (0, varsUtilities_1.color)('background', 'default', 'muted'),
                padding: '24px 12px',
                paddingLeft: !shrink ? '16px' : '6px',
                paddingRight: '8px',
                height: 'auto',
                minHeight: '100%',
                width: !shrink ? 224 : 58,
                transition: '0.3s all',
                // overflowX: 'clip',
                borderRight: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal', 'default')}`,
                [mobileAllowed ? utils_1.BpSmall : null]: {
                    display: open ? 'block' : 'none',
                    zIndex: 1,
                    maxHeight: '100%',
                    // position: 'absolute',
                    width: '100%',
                    maxWidth: '100%',
                    paddingRight: '4px !important',
                    paddingLeft: '12px',
                    ...components_1.scrollAreaStyle,
                },
                ...style,
            } },
            react_1.default.createElement("div", { style: { display: 'flex', width: '100%' } },
                header,
                react_1.default.createElement(inlines_1.styled.div, { style: {
                        marginLeft: 8,
                        height: 'fit-content',
                        display: 'none',
                        [mobileAllowed ? utils_1.BpSmall : null]: {
                            display: 'inline-block',
                        },
                    } },
                    react_1.default.createElement(components_1.Button, { color: "system", icon: open ? react_1.default.createElement(icons_1.IconClose, null) : react_1.default.createElement(icons_1.IconMenu, null), size: "small", onClick: () => {
                            setOpen(!open);
                        } }))),
            items,
            children,
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    marginTop: '24px',
                    marginBottom: '12px',
                    display: 'flex',
                    width: '100%',
                } }, footer))));
};
exports.Menu = Menu;
//# sourceMappingURL=index.js.map