import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { ChevronDownIcon } from "@chakra-ui/icons";
import { Box, Button, Collapse, HStack, Icon, Menu, MenuButton, MenuItem, MenuList, VStack, Text, useDisclosure, Stack, } from "@chakra-ui/react";
import React from "react";
import "@qorebase/app-runtime/src/integrations/loader";
import { integrations } from "@qorebase/app-runtime/src/interfaces";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import { ComponentPropertyEditor } from "../ComponentPropertyEditor";
const IntegrationConfiguration = (props) => {
    const collapseDisclosure = useDisclosure();
    const integration = RuntimeContext.useSelectState((state) => state.integrations[props.namespace]);
    const runtimeActions = RuntimeContext.useActions();
    const [emptyValue, setEmptyValue] = React.useState(false);
    return (_jsxs(VStack, Object.assign({ width: "full", padding: "8px 0" }, { children: [_jsxs(HStack, Object.assign({ width: "full" }, { children: [_jsx(Text, { children: props.namespace }), _jsx(Box, { flex: 1 }), _jsx(Icon, { boxSize: 5, as: ChevronDownIcon, cursor: "pointer", transform: `rotate(${collapseDisclosure.isOpen ? 0 : 90}deg)`, onClick: collapseDisclosure.onToggle })] })), _jsx(Box, Object.assign({ width: "full" }, { children: _jsx(Collapse, Object.assign({ in: collapseDisclosure.isOpen }, { children: _jsxs(Stack, Object.assign({ spacing: 2 }, { children: [Object.entries(integration.properties.definitions)
                                .filter(([, propsDef]) => !propsDef.hidden)
                                .map(([propName, propDef]) => (_jsx(ComponentPropertyEditor, { propName: propName, value: integration.properties.values[propName], propDef: propDef, handleChange: (value) => {
                                    if (value !== "" &&
                                        value !== "GTM-XXXXXXX" &&
                                        value.substring(0, 4) === "GTM-") {
                                        runtimeActions.setIntegrationProperty(props.namespace, propName, value);
                                        setEmptyValue(false);
                                    }
                                    else {
                                        setEmptyValue(true);
                                    }
                                } }, propName))), _jsx(Text, Object.assign({ color: "red.500", align: "center", fontSize: 14, display: emptyValue ? "block" : "none" }, { children: "Please fill in a valid GTM ID" })), _jsx("br", {}), _jsx(Button, Object.assign({ bgColor: "#DE220B", color: "white", size: "sm", onClick: () => runtimeActions.removeIntegration(props.namespace) }, { children: "Remove" }))] })) })) }))] })));
};
export default function IntegrationSetting() {
    const runtimeActions = RuntimeContext.useActions();
    const installedIntegrations = RuntimeContext.useSelectState((state) => state.integrations);
    const availableIntegrations = React.useMemo(() => {
        return Object.values(integrations).filter((integration) => !installedIntegrations[integration.name]);
    }, [installedIntegrations]);
    const handleAddIntegration = React.useCallback((namespace) => {
        runtimeActions.addIntegration(integrations[namespace]);
    }, [runtimeActions]);
    return (_jsxs(VStack, Object.assign({ w: "full" }, { children: [_jsx(Text, Object.assign({ w: "full", align: "left", fontSize: "md", fontWeight: "600", mb: "16px" }, { children: "Integration Option" })), _jsxs(Menu, Object.assign({ isLazy: true }, { children: [_jsx(MenuButton, Object.assign({ alignSelf: "flex-start", size: "sm", as: Button, rightIcon: _jsx(ChevronDownIcon, {}), disabled: availableIntegrations.length < 1 ? true : false }, { children: "Add integration" })), availableIntegrations.map((integration) => {
                        return (_jsx(MenuList, { children: _jsx(MenuItem, Object.assign({ onClick: () => handleAddIntegration(integration.name) }, { children: integration.name })) }, integration.name));
                    })] })), Object.keys(installedIntegrations).map((namespace) => (_jsx(IntegrationConfiguration, { namespace: namespace }, namespace)))] })));
}
//# sourceMappingURL=IntegrationSetting.js.map