import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { ChevronLeftIcon } from "@chakra-ui/icons";
import { Text, Flex, Button, IconButton, Tooltip, Grid, GridItem, Spacer, Center, } from "@chakra-ui/react";
import { Cog, Dashboard, Palette, Play, RotateRight } from "@feedloop/icon";
import Link from "next/link";
import { useRouter } from "next/router";
import qoreStorageClient from "../hooks/qoreStorageClient";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import SaveButton from "./SaveButton";
import React from "react";
const EditorHeader = () => {
    const router = useRouter();
    const appName = RuntimeContext.useSelectState((state) => state.name);
    const editorActions = EditorContext.useActions();
    const activeWindow = EditorContext.useSelectState((state) => state.activeWindow);
    const rightPanel = EditorContext.useSelectState((state) => state.rightPanel);
    const appDomains = qoreStorageClient.table("domains").useListRow({
        condition: {
            $and: [
                {
                    appdomain: {
                        $eq: router.query.appID,
                    },
                },
            ],
        },
        limit: 1,
    }, { skip: !router.isReady });
    const defaultDomain = appDomains.data[0];
    const showSettings = React.useMemo(() => activeWindow === "settings", [activeWindow]);
    const showAppearance = React.useMemo(() => rightPanel.type === "appearance", [rightPanel.type]);
    return (_jsxs(Grid, Object.assign({ h: "full", bg: "white", templateColumns: "repeat(5, 1fr)", borderBottom: "1px solid", borderColor: "gray.300", alignItems: "center", px: "2", justifyContent: "space-between" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 2 }, { children: _jsx(Link, Object.assign({ href: `/apps/project/${router.query.projectID}` }, { children: _jsx(Button, Object.assign({ px: "3", variant: "outline", size: "sm", leftIcon: _jsx(ChevronLeftIcon, { transform: "scale(1.7)" }) }, { children: "Back to Dashboards" })) })) })), _jsx(GridItem, Object.assign({ colSpan: 1 }, { children: _jsxs(Center, Object.assign({ gap: "2", fontWeight: "normal" }, { children: [_jsx(Dashboard, {}), _jsx(Text, Object.assign({ color: "gray.500" }, { children: "Dashboard" })), _jsx("span", { children: "/" }), _jsx(Text, Object.assign({ fontWeight: "bold" }, { children: appName || "App" }))] })) })), _jsx(GridItem, Object.assign({ colSpan: 2 }, { children: _jsxs(Flex, Object.assign({ gap: "2" }, { children: [_jsx(Spacer, {}), _jsx(Button, Object.assign({ size: "sm", variant: showSettings ? "outline" : "ghost", borderRadius: "4px", borderWidth: "1px", borderColor: showSettings ? "#99C1FF" : "transparent", backgroundColor: showSettings ? "#E6F0FF" : "transparent", color: showSettings ? "#0065FF" : "#171717", onClick: () => showSettings
                                ? editorActions.setWindow("preview")
                                : editorActions.setWindow("settings"), leftIcon: _jsx(Cog, { fontSize: "16px" }), lineHeight: "0px" }, { children: "App Settings" })), _jsx(Button, Object.assign({ size: "sm", variant: showAppearance ? "outline" : "ghost", borderRadius: "4px", borderWidth: "1px", borderColor: showAppearance ? "#99C1FF" : "transparent", backgroundColor: showAppearance ? "#E6F0FF" : "transparent", color: showAppearance ? "#0065FF" : "#171717", onClick: () => editorActions.setRightPanel({ type: "appearance" }), leftIcon: _jsx(Palette, { fontSize: "16px" }), lineHeight: "0px", isDisabled: showSettings }, { children: "Appearances" })), _jsx(SaveButton, {}), _jsx(IconButton, { "aria-label": "Version History", size: "sm", rounded: "md", icon: _jsx(RotateRight, {}), colorScheme: "brand", variant: "outline", isDisabled: showSettings, onClick: () => editorActions.setRightPanel({ type: "version history" }) }), _jsx(Tooltip, Object.assign({ hasArrow: true, label: "Add a domain in the App settings to run preview", rounded: "sm", placement: "bottom-start" }, { children: _jsx(IconButton, { "aria-label": "Preview", size: "sm", rounded: "md", onClick: defaultDomain
                                    ? () => {
                                        window.open(`${window.location.origin}/app/preview/apps/${router.query.appID}/domains/${(defaultDomain === null || defaultDomain === void 0 ? void 0 : defaultDomain.address) || ""}`, "_blank");
                                    }
                                    : undefined, icon: _jsx(Play, {}), colorScheme: "brand", variant: "solid" }) }))] })) }))] })));
};
export default EditorHeader;
//# sourceMappingURL=EditorHeader.js.map