import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box, Center, Icon, Tab, TabList, Tabs, Text, } from "@chakra-ui/react";
import { useMatch, useNavigate } from "react-router-dom";
import { motion } from "framer-motion";
import iconsList from "./components/iconsList";
import { EditorContext, RuntimeContext } from "@qorebase/app-component";
import { useComposer } from "./Composer";
import { duration } from "./directionMotion";
export const MotionBox = motion(Box);
export default function NavigationList() {
    const editMode = EditorContext.useSelectState((state) => state.editMode);
    const navs = RuntimeContext.useSelectState((state) => state.navbar.bottom);
    const match = useMatch("/page/:id");
    const composer = useComposer();
    const navigate = useNavigate();
    const tabIndex = React.useMemo(() => Math.max(0, navs.content.findIndex((nav) => nav.page === (match === null || match === void 0 ? void 0 : match.params.id))), [match === null || match === void 0 ? void 0 : match.params.id, navs.content]);
    return (_jsx(MotionBox, Object.assign({ animate: {
            transition: {
                duration,
                ease: "easeOut",
            },
            opacity: 1,
            y: 0,
        }, position: editMode === "select" ? "absolute" : "fixed", bottom: 0, left: 0, right: 0 }, { children: _jsx(Tabs, Object.assign({ index: tabIndex, size: "sm", isFitted: true, borderColor: "bg.800", bg: "surface.900", isLazy: true }, { children: _jsx(TabList, Object.assign({ borderColor: "transparent" }, { children: navs.content.map((nav, idx) => (_jsxs(Tab, Object.assign({ onClick: () => {
                        composer.setExitDirection("none");
                        setTimeout(() => navigate(`/page/${nav.page}`), 500);
                    }, display: "flex", flexDirection: "column", height: "55px", alignItems: "center", justifyContent: "center", borderBottom: "none", color: "text.900", _selected: {
                        color: (match === null || match === void 0 ? void 0 : match.params.id) === nav.page ? "brand.900" : "text.900",
                    } }, { children: [_jsx(Center, Object.assign({ pt: "2px" }, { children: _jsx(Icon, { boxSize: 6, as: iconsList[nav.icon] }) })), navs.showLabel && (_jsx(Text, Object.assign({ color: "inherit", textAlign: "center", maxW: "16", overflow: "hidden", whiteSpace: "nowrap", fontSize: "11px" }, { children: nav.label })))] }), nav.page + idx))) })) })) })));
}
//# sourceMappingURL=NavigationList.js.map