"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Navigation = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = require("react");
const Input_1 = require("../../../atoms/formElement/Input/Input");
const MaterialIcon_1 = require("../../../atoms/icon/MaterialIcon/MaterialIcon");
const Box_1 = require("../../../atoms/layout/Box/Box");
const IconButton_1 = require("../../button/IconButton/IconButton");
const List_1 = require("../../data/List/List");
const ListItem_1 = require("../../data/List/ListItem");
const ListItemButton_1 = require("../../data/List/ListItemButton");
const ListItemIcon_1 = require("../../data/List/ListItemIcon");
const ListItemText_1 = require("../../data/List/ListItemText");
const ListSubheader_1 = require("../../data/List/ListSubheader");
const Navigation = (props) => {
    const { groups } = props;
    const [categoriesOpen, setOpen] = (0, react_1.useState)([{ key: 'key', state: false }]);
    const addUseSate = (key, state) => {
        categoriesOpen.push({ key, state });
    };
    const handleCollapsClick = (key) => {
        const newCategoriesOpen = Object.assign([], categoriesOpen);
        if (categoriesOpen[key]) {
            newCategoriesOpen[key].state = !categoriesOpen[key].state;
        }
        setOpen(newCategoriesOpen);
    };
    const renderFoldIcon = (key, expanIcon, collapseIcon) => categoriesOpen[key] ? ((0, jsx_runtime_1.jsx)(MaterialIcon_1.MaterialIcon, { iconName: collapseIcon ?? 'ExpandLessTwoTone' })) : ((0, jsx_runtime_1.jsx)(MaterialIcon_1.MaterialIcon, { iconName: expanIcon ?? 'ExpandMoreTwoTone' }));
    const renderAddInput = (conf) => ((0, jsx_runtime_1.jsx)(ListItem_1.ListItem, { dense: true, children: (0, jsx_runtime_1.jsx)(Input_1.Input, { size: "small", variant: "standard", placeholder: conf.label, InputProps: conf.icon && {
                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: conf.onCreate, children: (0, jsx_runtime_1.jsx)(MaterialIcon_1.MaterialIcon, { iconName: conf.icon }) }) })),
            } }, "a") }));
    const renderNavigationItems = (items) => items.map((item) => {
        return ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { sx: { py: 0, minHeight: 32 }, onClick: item.onClick, children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.ListItemIcon, { sx: { fontSize: 11 }, children: (0, jsx_runtime_1.jsx)(MaterialIcon_1.MaterialIcon, { iconName: item.bulletIcon ? item.bulletIcon : 'FiberManualRecordTwoTone' }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: item.title, primaryTypographyProps: {
                        fontSize: 14,
                        fontWeight: 'medium',
                    } })] }, item.key));
    });
    const renderItemList = (category) => {
        return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { in: categoriesOpen[category.key].state, timeout: "auto", unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(List_1.List, { disablePadding: true, children: [category.items &&
                        category.items.length > 0 &&
                        renderNavigationItems(category.items), category.createItemConf && renderAddInput(category.createItemConf)] }) }));
    };
    const renderNavigationCategories = (categories) => categories.map((category) => {
        const collapsable = (category.items && category.items.length > 0) ||
            category.createItemConf;
        if (collapsable) {
            addUseSate(category.key, category.defaultOpen ?? false);
        }
        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: collapsable ? () => handleCollapsClick(category.key) : undefined, children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.ListItemIcon, { children: category.icon && (0, jsx_runtime_1.jsx)(MaterialIcon_1.MaterialIcon, { iconName: category.icon }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: category.title }), collapsable &&
                            renderFoldIcon(category.key, category.expandIcon, category.collapseIcon)] }), collapsable && renderItemList(category)] }, category.key));
    });
    const renderNavigation = (navigationGroups) => navigationGroups.map((group) => {
        return ((0, jsx_runtime_1.jsx)(List_1.List, { sx: {
                '.MuiListItemIcon-root': {
                    minWidth: '40px',
                    flexDirection: 'column',
                    alignItems: 'center',
                },
            }, subheader: group.title && (0, jsx_runtime_1.jsx)(ListSubheader_1.ListSubheader, { children: group.title }), children: renderNavigationCategories(group.categories) }, group.key));
    });
    return (0, jsx_runtime_1.jsx)(Box_1.Box, { children: renderNavigation(groups) });
};
exports.Navigation = Navigation;
//# sourceMappingURL=Navigation.js.map