import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Button, Icon, InputGroup, InputLeftElement, InputRightElement, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Select, Text, useClipboard, useToast, } from "@chakra-ui/react";
import { useRouter } from "next/router";
import React from "react";
import qoreStorageClient from "../hooks/qoreStorageClient";
import iconsList from "@qorebase/app-runtime/src/components/iconsList";
import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();
const ShareApplicationModal = ({ isOpen, onClose, appsName, appsDescription }) => {
    const router = useRouter();
    const toast = useToast();
    const [appsUrl, setAppsUrl] = React.useState("");
    const { hasCopied, onCopy } = useClipboard(appsUrl);
    React.useEffect(() => {
        if (hasCopied) {
            toast({
                description: "Successfully copying the link",
                status: "success",
                duration: 1000,
                isClosable: true,
            });
        }
    }, [hasCopied]);
    const domains = qoreStorageClient.table("domains").useListRow({
        condition: {
            $and: [
                {
                    appdomain: {
                        $eq: router.query.appID,
                    },
                },
            ],
        },
    });
    const handleChangeAppsUrl = React.useCallback((e) => {
        setAppsUrl(e.currentTarget.value);
    }, []);
    return (_jsxs(Modal, Object.assign({ isOpen: isOpen, onClose: onClose, isCentered: true }, { children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: "Share Application" }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, Object.assign({ paddingBottom: "40px" }, { children: [_jsxs(Box, Object.assign({ marginTop: "8px", marginBottom: "32px" }, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: appsName || "Application Name" })), _jsx(Text, Object.assign({ color: "gray.500", fontSize: "md" }, { children: appsDescription || "Description about this application" }))] })), _jsxs(Box, { children: [_jsx(Text, { children: "Share app:" }), _jsxs(InputGroup, Object.assign({ borderColor: "#d4d8de" }, { children: [_jsx(InputLeftElement, { children: _jsx(Icon, { boxSize: "20px", as: iconsList["Link"], color: "gray" }) }), _jsx(Select, Object.assign({ mr: "98px", ml: "40px", focusBorderColor: "none", placeholder: "select domain", onChange: handleChangeAppsUrl, value: appsUrl }, { children: domains.data.map((domain, idx) => {
                                                    const address = domain.address +
                                                        (domain.type === "Hosted"
                                                            ? publicRuntimeConfig.appsDomain
                                                            : "");
                                                    return (_jsxs("option", Object.assign({ value: `https://${address}` }, { children: ["https://", address] }), domain.address + idx));
                                                }) })), _jsx(InputRightElement, Object.assign({ width: "98px" }, { children: _jsx(Button, Object.assign({ colorScheme: "brand", bg: "#0065FF", size: "sm", onClick: onCopy, disabled: !appsUrl }, { children: "Copy Link" })) }))] }))] })] }))] })] })));
};
export default ShareApplicationModal;
//# sourceMappingURL=ShareApplicationModal.js.map