import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { ChevronUp } from "@feedloop/icon";
import { Box, Flex, HStack, Icon, IconButton, Skeleton, Text, useDisclosure, } from "@chakra-ui/react";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import { css } from "@emotion/react";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import { useHumanize } from "@qorebase/app-runtime/src/utils/humanizeString";
import PageItem from "./PageItem";
const PageGroup = (props) => {
    const pageListDisclosure = useDisclosure({ defaultIsOpen: true });
    const runtimeActions = RuntimeContext.useActions();
    const ready = EditorContext.useSelectState((state) => state.ready);
    const groupName = useHumanize(props.group);
    const handleDragEndNavigation = React.useCallback((result) => {
        if (!result.destination)
            return;
        runtimeActions.swapPage(props.pages, result.source.index, result.destination.index);
    }, [runtimeActions, props.group, props.pages]);
    return (_jsxs(Box, Object.assign({ "data-test-id": "page-group", "data-test-group-name": groupName, pr: "4", pl: "2" }, { children: [_jsx(Flex, Object.assign({ css: css `
          align-items: baseline;

          #pages-grouping-reveal-menu {
            transition: opacity 200ms ease;
            opacity: 0;
          }
          &:hover #pages-grouping-reveal-menu {
            opacity: 1;
          }
        ` }, { children: _jsxs(HStack, Object.assign({ onClick: pageListDisclosure.onToggle, p: "2", color: "gray.400" }, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold", fontSize: "xs", color: "inherit" }, { children: groupName === "Page" ? "Pages" : groupName })), _jsx(IconButton, { "aria-label": "Expand collapse", size: "xs", variant: "ghost", rounded: "full", icon: _jsx(Icon, { cursor: "pointer", fontSize: "xl", css: css `
                  transform: translateY(1px)
                    rotate(${pageListDisclosure.isOpen ? "0deg" : "-180deg"});
                  transition: transform 0.2s;
                `, as: ChevronUp }) })] })) })), !ready ? (_jsxs(Box, Object.assign({ "data-test-id": "schema-loading-skeleton", p: 4 }, { children: [_jsx(Skeleton, { height: "20px" }), _jsx(Skeleton, { height: "20px", my: 2 }), _jsx(Skeleton, { height: "20px" })] }))) : (_jsx(Box, Object.assign({ css: css `
            cursor: pointer !important;
          ` }, { children: pageListDisclosure.isOpen && (_jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEndNavigation }, { children: _jsx(Droppable, Object.assign({ droppableId: "navigation", direction: "vertical" }, { children: (provided) => (_jsxs(Box, Object.assign({}, provided.droppableProps, { ref: provided.innerRef }, { children: [props.pages.map((page, pageIndex) => (_jsx(PageItem, { groupSize: props.pages.length, page: page, index: pageIndex, group: props.group }, page.id))), provided.placeholder] }))) })) }))) })))] })));
};
export default PageGroup;
//# sourceMappingURL=PageGroup.js.map