import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, VStack, Box, FormControl, FormLabel, Input, ModalFooter, Button, Flex, Spinner, Icon, Text, Link, } from "@chakra-ui/react";
import { ChevronCheck, Close } from "@feedloop/icon";
import React from "react";
import { importCustomComponent } from "@qorebase/app-runtime/src/utils/importComponent";
import { useForm } from "react-hook-form";
const AddCustomComponent = ({ handleAddComponent, children }) => {
    const [modalCustomComponent, setModalCustomComponent] = React.useState(null);
    const form = useForm({
        defaultValues: {
            name: "",
            url: "",
        },
    });
    return (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ role: "button", onClick: () => setModalCustomComponent("register") }, { children: children })), _jsxs(Modal, Object.assign({ isOpen: !!modalCustomComponent, onClose: () => {
                    modalCustomComponent !== "loading" && setModalCustomComponent(null);
                } }, { children: [_jsx(ModalOverlay, {}), modalCustomComponent &&
                        (modalCustomComponent === "register" ? (_jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: _jsx(Text, Object.assign({ fontSize: "lg" }, { children: "Add custom component" })) }), _jsx(ModalBody, { children: _jsxs(VStack, Object.assign({ spacing: 4 }, { children: [_jsx(Box, Object.assign({ padding: "16px", borderRadius: "4px", backgroundColor: "gray.100" }, { children: _jsxs(Text, Object.assign({ color: "gray.600" }, { children: ["Custom component can be used by editors to create components with the appearance and functionality according to their needs, if the official Qore component has not been able to meet these needs.", _jsx(Link, Object.assign({ href: "https://docs.qore.dev/component/custom-component", color: "blue.500", isExternal: true }, { children: "Learn more" }))] })) })), _jsxs(FormControl, Object.assign({ id: "name" }, { children: [_jsx(FormLabel, { children: "Name" }), _jsx(Input, { name: "name", ref: form.register({ required: true }), placeholder: "Component Name", size: "sm" })] })), _jsxs(FormControl, Object.assign({ id: "subdomain" }, { children: [_jsx(FormLabel, { children: "Component URL" }), _jsx(Input, { name: "url", ref: form.register({ required: true }), placeholder: "Component URL", size: "sm" })] }))] })) }), _jsxs(ModalFooter, Object.assign({ flex: 1 }, { children: [_jsx(Button, Object.assign({ width: "100%", mr: 3, onClick: () => setModalCustomComponent(null), size: "sm" }, { children: "Cancel" })), _jsx(Button, Object.assign({ width: "100%", colorScheme: "brand", onClick: form.handleSubmit(({ name, url }) => {
                                                setModalCustomComponent("loading");
                                                importCustomComponent(url)
                                                    .then(({ id }) => {
                                                    handleAddComponent(id, name, url);
                                                    setModalCustomComponent("success");
                                                })
                                                    .catch((err) => {
                                                    console.error(err);
                                                    setModalCustomComponent("error");
                                                });
                                            }), size: "sm" }, { children: "Add component" }))] }))] })) : (_jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: _jsx(Text, Object.assign({ fontSize: "xl" }, { children: "Validation Component" })) }), _jsx(ModalBody, { children: _jsx(Box, Object.assign({ borderWidth: "1px", borderStyle: "solid", borderColor: "gray.200", borderRadius: "md", p: 3 }, { children: modalCustomComponent === "loading" ? (_jsxs(Flex, Object.assign({ alignItems: "flex-start" }, { children: [_jsx(Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" }), _jsxs(Box, Object.assign({ flex: 1, marginLeft: "3" }, { children: [_jsx(Text, Object.assign({ fontWeight: "bold" }, { children: "Creating Component" })), _jsx(Text, Object.assign({ color: "gray.500" }, { children: "Fetching and validating component from URL" }))] }))] }))) : modalCustomComponent === "success" ? (_jsxs(Flex, Object.assign({ alignItems: "flex-start" }, { children: [_jsx(Box, Object.assign({ w: 10, h: 10, borderRadius: "full", backgroundColor: "green.100", alignItems: "center", justifyContent: "center", boxSizing: "border-box", display: "flex" }, { children: _jsx(Icon, { as: ChevronCheck, color: "green" }) })), _jsxs(Box, Object.assign({ flex: 1, marginLeft: "3" }, { children: [_jsx(Text, Object.assign({ fontWeight: "bold" }, { children: "Component created" })), _jsx(Text, Object.assign({ color: "gray.500" }, { children: "Your component has been created" }))] }))] }))) : (_jsxs(Flex, Object.assign({ alignItems: "flex-start" }, { children: [_jsx(Box, Object.assign({ w: 10, h: 10, borderRadius: "full", backgroundColor: "red.100", alignItems: "center", justifyContent: "center", boxSizing: "border-box", display: "flex" }, { children: _jsx(Icon, { as: Close, color: "red" }) })), _jsxs(Box, Object.assign({ flex: 1, marginLeft: "3" }, { children: [_jsx(Text, Object.assign({ fontWeight: "bold" }, { children: "Failed create component" })), _jsx(Text, Object.assign({ color: "gray.500" }, { children: "Your component URL is invalid" }))] }))] }))) })) }), _jsxs(ModalFooter, Object.assign({ flex: 1 }, { children: [_jsx(Button, Object.assign({ width: "100%", mr: 3, disabled: modalCustomComponent === "loading", onClick: () => setModalCustomComponent("register") }, { children: "Create again" })), _jsx(Button, Object.assign({ width: "100%", colorScheme: "brand", disabled: modalCustomComponent === "loading", onClick: () => setModalCustomComponent(null) }, { children: "Done" }))] }))] })))] }))] }));
};
export default AddCustomComponent;
//# sourceMappingURL=AddCustomComponent.js.map