import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Divider, FormControl, FormLabel, Stack } from "@chakra-ui/react";
import { initialPage } from "@qorebase/app-runtime/src/InitialData";
import { pageDefinition } from "@qorebase/app-runtime/src/interfaces";
import { usePageParam } from "@qorebase/app-runtime/src/hooks/usePageParam";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import { humanize } from "@qorebase/app-runtime/src/utils/humanizeString";
import { VariablesProvider } from "@qorebase/app-runtime/src/VariablesContext";
import React from "react";
import { usePageVariables } from "./ComponentEditorPanel";
import { ComponentPropertyEditor } from "./ComponentPropertyEditor";
export default function PageSetting() {
    const pageID = usePageParam();
    const page = RuntimeContext.useSelectState((state) => state.maps.page[pageID]);
    const tables = RuntimeContext.useSelectState((state) => state.schema.tables);
    const table = React.useMemo(() => {
        return tables.find((view) => view.name === (page === null || page === void 0 ? void 0 : page.sourceID));
    }, [tables, page === null || page === void 0 ? void 0 : page.sourceID]);
    const runtimeActions = RuntimeContext.useActions();
    const { variables: pageVariables } = usePageVariables();
    const propsDefs = React.useMemo(() => {
        return Object.entries(pageDefinition).filter(([propName]) => propName !== "onSuccess" && propName !== "title");
    }, []);
    const headerGroupSet = React.useMemo(() => new Set(["headerStyle", "action", "icon"]), []);
    const propsDefsGroup = React.useMemo(() => {
        const group = {
            behavior: [],
            header: [],
        };
        if (!page)
            return group;
        propsDefs.forEach((def) => {
            if (!headerGroupSet.has(def[0])) {
                group.behavior.push(def);
            }
            else if (!(page.mode === "form")) {
                group.header.push(def);
            }
        });
        return group;
    }, [propsDefs, page]);
    if (!page)
        return null;
    return (_jsx(Box, Object.assign({ as: "form", "data-test-id": "page-setting-panel", p: "4" }, { children: _jsx(Stack, Object.assign({ spacing: 2 }, { children: _jsx(VariablesProvider, Object.assign({ variables: pageVariables }, { children: _jsx(FormControl, { children: Object.keys(propsDefsGroup).map((key) => {
                        return (!!propsDefsGroup[key].length && (_jsxs(React.Fragment, { children: [_jsx(FormLabel, Object.assign({ fontWeight: "semibold" }, { children: humanize(key) })), _jsx(Stack, Object.assign({ spacing: 2 }, { children: propsDefsGroup[key].map(([propName, propDef]) => (_jsx(ComponentPropertyEditor, { propName: propName, value: page.properties.values[propName] ||
                                            initialPage.properties.values[propName], view: table, propDef: propDef, handleChange: (value) => {
                                            runtimeActions.setPageProperty({ page: page.id }, propName, value);
                                        } }, propName))) })), _jsx(Divider, { my: 4 })] }, key)));
                    }) }) })) })) })));
}
//# sourceMappingURL=PageOption.js.map