import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box, Flex, HStack, Icon, Menu, MenuButton, MenuItem, MenuList, Portal, Text, Tooltip, useDisclosure, } from "@chakra-ui/react";
import { css } from "@emotion/react";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import iconsList from "@qorebase/app-runtime/src/components/iconsList";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import useTemplate from "@qorebase/app-runtime/src/hooks/useTemplate";
import { useNavigate } from "react-router-dom";
import { nanoid } from "nanoid";
import { FlagsAlt } from "@feedloop/icon";
import { usePageParam } from "@qorebase/app-runtime/src/hooks/usePageParam";
const PageItem = (props) => {
    const runtimeActions = RuntimeContext.useActions();
    const menuDisclosure = useDisclosure();
    const pageId = usePageParam();
    const { page } = props;
    const components = RuntimeContext.useSelectState((state) => state.maps.component);
    const pages = RuntimeContext.useSelectState((state) => state.maps.page);
    const entryPage = RuntimeContext.useSelectState((state) => { var _a; return (_a = state.config.initialPage) === null || _a === void 0 ? void 0 : _a.entryPage; });
    const navigate = useNavigate();
    const isActivePage = React.useMemo(() => pageId === props.page.id, [pageId, props.page.id]);
    const editorActions = EditorContext.useActions();
    const rightPanel = EditorContext.useSelectState(({ rightPanel }) => rightPanel);
    const pageTitle = useTemplate(page.title);
    const isEntryPage = React.useMemo(() => entryPage === page.id, [entryPage, page.id]);
    const isMenuDisabled = page.type === "navigation" && props.groupSize <= 1;
    const handleDuplicatePage = React.useCallback(() => {
        const newComponentIds = {};
        const newComponent = page.components.map((compRef) => {
            const newComponentId = nanoid(3);
            const comp = components[compRef.component];
            newComponentIds[comp.id] = newComponentId;
            return Object.assign(Object.assign({}, comp), { id: newComponentId });
        });
        const getNewTitle = (t, i = 1) => {
            var _a;
            const titleIndex = (_a = /.+ (\(\d+\))$/g.exec(t)) === null || _a === void 0 ? void 0 : _a[1];
            const originalTitle = titleIndex
                ? t.slice(0, titleIndex.length * -1 - 1)
                : t;
            const title = `${originalTitle} (${i})`;
            return Object.values(pages).find((page) => page.title === title)
                ? getNewTitle(originalTitle, i + 1)
                : title;
        };
        const newPage = Object.assign(Object.assign({}, page), { id: nanoid(3), title: getNewTitle(page.title), components: [] });
        runtimeActions.addPage(newPage);
        newComponent.forEach((c) => {
            if (c.metadata.container) {
                c.metadata = Object.assign(Object.assign({}, c.metadata), { container: newComponentIds[c.metadata.container] });
            }
            runtimeActions.addComponent(c, { page: newPage.id });
        });
        navigate(`/page/${newPage.id}`);
    }, [navigate, components, page, pages]);
    return (_jsxs(Flex, Object.assign({ "data-test-id": "page-item", "data-test-page-name": pageTitle, px: "2", mx: "3", cursor: "pointer", borderRadius: "4px", css: css `
        background-color: ${isActivePage && rightPanel.type === "page"
            ? "#E6F0FF"
            : "transparent"};
        &:hover {
          background-color: #eff4fb;
        }
        ${(isActivePage || menuDisclosure.isOpen) && rightPanel.type === "page"
            ? `
              #setting-button {
                color: #0065FF;
              }
              #reveal-menu {
                opacity: 1;
              }
              &:hover #setting-button {
                color: #0065FF;
              }`
            : `
              #reveal-menu {
                transition: opacity 200ms ease;
                opacity: 0;
              }
              #setting-button {
                color: #a2a2a2;
              }`}
        &:hover #reveal-menu {
          opacity: 1;
        }
      ` }, { children: [_jsx(Box, Object.assign({ flex: 1, py: "8px", onClick: () => {
                    navigate(`/page/${page.id}`);
                    editorActions.setRightPanel({ type: "page" });
                } }, { children: _jsx(HStack, Object.assign({ spacing: "2" }, { children: _jsx(Text, Object.assign({ color: isActivePage ? "#004DC4" : "#001E4D" }, { children: pageTitle })) })) })), _jsxs(HStack, Object.assign({ py: "1", id: "setting-button" }, { children: [_jsx(Box, Object.assign({ id: "reveal-menu" }, { children: _jsxs(Menu, Object.assign({ isLazy: true, autoSelect: false, onOpen: menuDisclosure.onOpen, onClose: menuDisclosure.onClose, isOpen: menuDisclosure.isOpen }, { children: [_jsx(MenuButton, Object.assign({ "data-test-id": "page-item-menu-button", h: "full" }, { children: _jsx(Icon, { as: iconsList["MoreHorizontal"], fontSize: "md", css: css `
                  transform: translateY(2px);
                ` }) })), _jsx(Portal, { children: _jsxs(MenuList, Object.assign({ "data-test-id": "page-item-menu-list" }, { children: [_jsx(MenuItem, Object.assign({ isDisabled: isMenuDisabled, "data-test-id": "remove-page-button", onClick: () => {
                                                    runtimeActions.removePage({ page: page.id });
                                                } }, { children: "Delete" })), page.type !== "system" && (_jsx(MenuItem, Object.assign({ onClick: () => {
                                                    handleDuplicatePage();
                                                } }, { children: "Duplicate" })))] })) })] })) })), isEntryPage && (_jsx(Tooltip, Object.assign({ hasArrow: true, label: "Initial page" }, { children: _jsx(Box, { children: _jsx(FlagsAlt, { fontSize: "md" }) }) })))] }))] }), page.id));
};
export default PageItem;
//# sourceMappingURL=PageItem.js.map