import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box, Center, Flex, Skeleton, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Text, } from "@chakra-ui/react";
import { css } from "@emotion/react";
import { Scrollbars } from "rc-scrollbars";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import qoreStorageClient from "../hooks/qoreStorageClient";
import { useRouter } from "next/router";
import ComponentsManager from "./ComponentsManager";
import { Resizable } from "re-resizable";
import useLocalStorage from "../hooks/useLocalStorage";
import AddPageForm from "./PageManager/AddPageForm";
import LibraryPanel from "./LibraryPanel";
import PageItem from "./PageManager/PageItem";
import { usePageParam } from "@qorebase/app-runtime/src/hooks/usePageParam";
const PageManager = React.memo(function PageManager() {
    const pagesMap = RuntimeContext.useSelectState((state) => state.maps.page);
    const pageGroups = React.useMemo(() => Object.values(pagesMap), [pagesMap]);
    const ready = EditorContext.useSelectState((state) => state.ready);
    return (_jsx(Box, Object.assign({ paddingY: 2 }, { children: !ready ? (_jsx(Stack, Object.assign({ "data-test-id": "schema-loading-skeleton", px: 2, gap: 1 }, { children: Array.from(Array(6).keys()).map((key) => (_jsx(Skeleton, { height: "32px", startColor: "#E6F0FF" }, key))) }))) : (_jsx(Flex, Object.assign({ direction: "column", gap: 0 }, { children: pageGroups.map((page, index) => {
                return (_jsx(PageItem, { page: page, index: index, groupSize: pageGroups.length }, page.id));
            }) }))) })));
});
export default React.memo(function PageManagerPanel() {
    const router = useRouter();
    const currentApp = qoreStorageClient
        .table("applications")
        .useGetRow(router.query.appID, { skip: !router.isReady });
    React.useEffect(() => { }, [currentApp]);
    const pageID = usePageParam();
    const [panelHeight, setPanelHeight] = useLocalStorage("panel-height", "50%");
    const selectedTabStyle = {
        color: "gray.900",
        fontWeight: "600",
        borderBottom: "2px solid",
        borderColor: "blue.400",
    };
    return (_jsx(Box, Object.assign({ position: "relative", height: "full", overflow: "hidden", bg: "white", borderRight: "1px solid", borderColor: "gray.300" }, { children: _jsxs(Tabs, Object.assign({ size: "sm", h: "full", display: "flex", flexDirection: "column", isLazy: true, isFitted: true }, { children: [_jsxs(TabList, Object.assign({ h: "10" }, { children: [_jsx(Tab, Object.assign({ _selected: selectedTabStyle }, { children: "Layers" })), _jsx(Tab, Object.assign({ _selected: selectedTabStyle }, { children: "Library" }))] })), _jsxs(TabPanels, Object.assign({ id: "tools-panel", flex: "1", overflow: "hidden" }, { children: [_jsxs(TabPanel, Object.assign({ p: "0", h: "full", display: "flex", flexDirection: "column", position: "relative", overflow: "hidden", css: css `
              .handle-bottom {
                position: relative;
                z-index: 1;
              }
              .handle-bottom:after {
                content: "";
                position: absolute;
                bottom: 2px;
                left: calc(50% - 50px);
                display: block;
                width: 100px;
                height: 4px;
                background: var(--chakra-colors-blue-300);
                border-radius: var(--chakra-radii-md);
                pointer-events: none;
                opacity: 0;
                transition: opacity 300ms ease-out;
              }
              .handle-bottom:hover:after {
                opacity: 1;
              }
              .handle-bottom:active:after {
                opacity: 1;
              }
              .handle-bottom:before {
                content: "";
                position: absolute;
                bottom: 4px;
                display: block;
                width: 100%;
                height: 1px;
                background: var(--chakra-colors-gray-300);
                pointer-events: none;
              }
            ` }, { children: [_jsx(Resizable, Object.assign({ defaultSize: { height: panelHeight, width: "100%" }, minHeight: 48, maxHeight: 830, enable: { bottom: true }, handleWrapperClass: "handle-wrapper", handleClasses: { bottom: "handle-bottom" }, onResizeStop: (_, __, element) => {
                                        setPanelHeight(element.offsetHeight);
                                    } }, { children: _jsxs(Box, Object.assign({ h: "full", w: "full", flexDirection: "column" }, { children: [_jsxs(Flex, Object.assign({ px: "12px", py: "3px", h: "39px", bg: "white", position: "sticky", top: "0", zIndex: "1" }, { children: [_jsx(Flex, Object.assign({ flex: 1, alignItems: "center" }, { children: _jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Pages" })) })), _jsx(Center, { children: _jsx(AddPageForm, {}) })] })), _jsx(Box, Object.assign({ height: "full", paddingBottom: "39px" }, { children: _jsx(Scrollbars, Object.assign({ autoHide: true, style: { zIndex: 0 } }, { children: _jsx(PageManager, {}) })) }))] })) })), _jsx(Box, Object.assign({ flex: "1", overflow: "hidden" }, { children: _jsx(ComponentsManager, {}) }))] })), _jsx(TabPanel, Object.assign({ p: "0", h: "full", display: "flex", flexDirection: "column", position: "relative" }, { children: _jsx(Scrollbars, Object.assign({ universal: true, autoHide: true }, { children: _jsx(LibraryPanel, {}) })) }))] }))] }), pageID) })));
});
//# sourceMappingURL=PageManagerPanel.js.map