import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box, Button, HStack, Icon, IconButton, Input, InputGroup, InputLeftAddon, SimpleGrid, Switch, Text, useDisclosure, VStack, } from "@chakra-ui/react";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import { unregisterComponent, } from "@qorebase/app-runtime/src/interfaces";
import { Delete, Edit } from "@feedloop/icon";
import { useForm } from "react-hook-form";
import { importNpmComponent, listLocalComponents, isPackage, isLocal, importLocalNpmComponent, removeLocalNpmComponent, } from "@qorebase/app-runtime/src/utils/importComponent";
const EditComponentRegistrationItem = (props) => {
    const runtimeActions = RuntimeContext.useActions();
    const [version, setVersion] = React.useState(props.component.version);
    const [loading, setLoading] = React.useState(false);
    const [isValid, setIsValid] = React.useState(true);
    return (_jsxs(Box, { children: [_jsxs(HStack, Object.assign({ justifyContent: "space-between", alignItems: "flex-start" }, { children: [_jsx(Text, Object.assign({ fontSize: "12px", height: "32px", pt: 2 }, { children: "Package name" })), _jsx(VStack, Object.assign({ alignItems: "left", w: "80%" }, { children: _jsxs(InputGroup, { children: [_jsx(InputLeftAddon, Object.assign({ p: "8px 12px", fontSize: "12px", height: "32px", m: 0, flexGrow: 1 }, { children: props.component.name })), _jsx(Input, { maxW: "90px", value: version, fontSize: "12px", height: "32px", m: 0, errorBorderColor: "red.300", isInvalid: !isValid, onChange: (e) => {
                                        setIsValid(true);
                                        setVersion(e.target.value);
                                    } })] }) }))] })), _jsxs(HStack, Object.assign({ justifyContent: "space-between", mt: 4 }, { children: [_jsxs(HStack, { children: [_jsx(Button, Object.assign({ borderRadius: "4px", size: "sm", color: "white", bg: "#0065FF", _hover: { bg: "#0065FF" }, disabled: loading, onClick: () => {
                                    setLoading(true);
                                    importNpmComponent(props.component.name, version)
                                        .then((res) => {
                                        runtimeActions.setVersionNpmComponent(props.component.name, version);
                                        props.onClose();
                                    })
                                        .catch((err) => {
                                        console.error(err);
                                        setIsValid(false);
                                        setLoading(false);
                                    });
                                } }, { children: loading ? "Saving" : "Save" })), _jsx(Button, Object.assign({ borderRadius: "4px", size: "sm", bg: "white", border: "1px solid #E7E7E7", _hover: { bg: "white" }, onClick: props.onClose }, { children: "Cancel" }))] }), _jsx(IconButton, { "aria-label": "Delete", bg: "white", _hover: { bg: "white" }, border: "1px solid #E7E7E7", size: "sm", icon: _jsx(Delete, {}), onClick: () => {
                            unregisterComponent(props.component.name);
                            runtimeActions.removeNpmComponent(props.component.name);
                        }, _active: { bg: "white" } })] }))] }));
};
const ComponentRegistrationItem = (props) => {
    const runtimeActions = RuntimeContext.useActions();
    const editDisclosure = useDisclosure();
    return (_jsx(Box, Object.assign({ padding: "12px 16px", border: "1px solid #E7E7E7", rounded: "md", mb: 4 }, { children: editDisclosure.isOpen ? (_jsx(EditComponentRegistrationItem, { component: props.component, onClose: editDisclosure.onClose })) : (_jsx(VStack, Object.assign({ alignItems: "stretch" }, { children: _jsxs(HStack, Object.assign({ justifyContent: "space-between" }, { children: [_jsx(Text, { children: [props.component.name, props.component.version].join("@") }), _jsxs(HStack, { children: [_jsx(Icon, { fontSize: "md", as: Edit, cursor: "pointer", color: "#A2A2A2", onClick: editDisclosure.onOpen, _hover: { color: "#0065FF" } }), _jsx(Switch, { isChecked: props.component.enabled, onChange: (e) => {
                                    const { checked } = e.target;
                                    Promise.resolve(checked
                                        ? importNpmComponent(props.component.name, props.component.version)
                                        : unregisterComponent(props.component.name))
                                        .then(() => {
                                        runtimeActions.setEnableNpmComponent(props.component.name, checked);
                                    })
                                        .catch((err) => {
                                        console.error("error", err);
                                    });
                                } })] })] })) }))) })));
};
const LocalComponentItem = (props) => {
    return (_jsx(Box, Object.assign({ padding: "12px 16px", border: "1px solid #E7E7E7", rounded: "md", mb: 4 }, { children: _jsx(VStack, Object.assign({ alignItems: "stretch" }, { children: _jsxs(HStack, Object.assign({ justifyContent: "space-between" }, { children: [_jsx(Text, { children: props.url }), _jsx(HStack, { children: _jsx(IconButton, { "aria-label": "Delete", icon: _jsx(Icon, { fontSize: "md", as: Delete, cursor: "pointer" }), size: "xs", colorScheme: "red", onClick: () => {
                                unregisterComponent(props.url);
                                removeLocalNpmComponent(props.url);
                                props.onDelete();
                            }, variant: "ghost" }) })] })) })) })));
};
export default function ComponentsSettings() {
    const components = RuntimeContext.useSelectState((state) => state.components);
    const [localComponents, setLocalComponents] = React.useState(listLocalComponents());
    const runtimeActions = RuntimeContext.useActions();
    const addComponentForm = useForm({
        mode: "onChange",
        defaultValues: {
            name: "",
            version: "latest",
        },
    });
    const name = addComponentForm.watch("name");
    const isValidPackage = React.useMemo(() => isPackage(name), [name]);
    const isLocalPackage = React.useMemo(() => isLocal(name), [name]);
    return (_jsxs(Box, { children: [_jsx(Text, Object.assign({ align: "left", fontSize: "md", fontWeight: "600", mb: "16px" }, { children: "Components" })), _jsx(Text, Object.assign({ fontSize: "14px", mb: 4 }, { children: "Manage app components" })), _jsx(SimpleGrid, Object.assign({ row: 2, mb: 4 }, { children: _jsxs(HStack, { children: [_jsx(Input, { maxH: "32px", placeholder: "package name", name: "name", fontSize: "12px", _placeholder: { color: "#A2A2A2" }, ref: addComponentForm.register({ required: true }) }), isValidPackage && (_jsx(Input, { maxH: "32px", maxW: 95, placeholder: "version", name: "version", fontSize: "12px", _placeholder: { color: "#A2A2A2" }, ref: addComponentForm.register({ required: true }) })), _jsx(Button, Object.assign({ maxH: "32px", maxW: 120, fontSize: "sm", width: "full", rounded: "md", bg: "#0065FF", color: "white", _hover: { bg: "#0065FF" }, disabled: !(isValidPackage || isLocalPackage), onClick: addComponentForm.handleSubmit(({ name, version = "latest" }) => {
                                if (isLocalPackage) {
                                    importLocalNpmComponent(name).then(() => {
                                        setLocalComponents(listLocalComponents());
                                    });
                                    return;
                                }
                                importNpmComponent(name, version)
                                    .then(() => {
                                    runtimeActions.addNpmComponent(name, version);
                                })
                                    .catch((err) => {
                                    console.error(err);
                                });
                            }) }, { children: "Add Component" }))] }) })), localComponents.map((url) => (_jsx(LocalComponentItem, { url: url, onDelete: () => setLocalComponents(listLocalComponents()) }, url))), components.map((component) => (_jsx(ComponentRegistrationItem, { component: component }, component.name)))] }));
}
//# sourceMappingURL=ComponentsSettings.js.map