import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { serviceWorkerManager } from "@powerhousedao/connect";
import { connectConfig } from "@powerhousedao/connect/config";
import { Combobox, FormInput, Icon, Modal, PowerhouseButton, } from "@powerhousedao/design-system";
import { addTrigger, closePHModal, registerNewPullResponderTrigger, removeTrigger, useDrives, usePHModal, } from "@powerhousedao/reactor-browser";
import { generateUUIDBrowser } from "document-model/core";
import { useEffect, useState } from "react";
export const DebugSettingsModal = () => {
    const phModal = usePHModal();
    const open = phModal?.type === "debugSettings";
    const autoRegisterPullResponder = localStorage.getItem("AUTO_REGISTER_PULL_RESPONDER") !== "false";
    const [appVersion, setAppVersion] = useState(connectConfig.appVersion);
    const [serviceWorkerDebugMode, setServiceWorkerDebugMode] = useState({
        label: serviceWorkerManager.debug ? "Enabled" : "Disabled",
        value: serviceWorkerManager.debug,
    });
    const [selectedDrive, setSelectedDrive] = useState();
    const [selectedDriveTrigger, setSelectedDriveTrigger] = useState(null);
    const [driveUrl, setDriveUrl] = useState("");
    const [autoRegister, setAutoRegister] = useState({
        label: autoRegisterPullResponder ? "Enabled" : "Disabled",
        value: autoRegisterPullResponder ? "true" : "false",
    });
    const drives = useDrives();
    useEffect(() => {
        serviceWorkerManager.setDebug(serviceWorkerDebugMode.value);
    }, [serviceWorkerDebugMode]);
    const driveTriggers = drives?.find((drive) => drive.header.id === selectedDrive)?.state.local
        .triggers || [];
    const isEmptyURL = driveUrl === "";
    const disableUrlButtons = !selectedDrive || isEmptyURL;
    const removeTriggerHandler = async () => {
        if (!selectedDriveTrigger || !selectedDrive)
            return;
        await removeTrigger(selectedDrive, selectedDriveTrigger.value);
        setSelectedDriveTrigger(null);
    };
    const addTriggerHandler = async (invalid = false) => {
        if (!driveUrl || driveUrl === "" || !selectedDrive)
            return;
        if (!invalid) {
            const pullResponderTrigger = await registerNewPullResponderTrigger(selectedDrive, driveUrl, { pullInterval: 3000 });
            if (!pullResponderTrigger)
                return;
            await addTrigger(selectedDrive, pullResponderTrigger);
            setDriveUrl("");
            return;
        }
        const triggerId = generateUUIDBrowser();
        await addTrigger(selectedDrive, {
            id: `invalid-trigger-${triggerId}`,
            type: "PullResponder",
            data: {
                interval: "3000",
                listenerId: `invalid-listener-${triggerId}`,
                url: driveUrl,
            },
        });
        setDriveUrl("");
    };
    const handleDisableAutoResiterPullResponder = (selectedOption) => {
        setAutoRegister(selectedOption);
        localStorage.setItem("AUTO_REGISTER_PULL_RESPONDER", selectedOption.value);
    };
    return (_jsx(Modal, { open: open, onOpenChange: (status) => {
            if (!status)
                return closePHModal();
        }, contentProps: {
            className: "rounded-2xl",
        }, children: _jsxs("div", { className: "w-[700px] rounded-2xl p-6", children: [_jsxs("div", { className: "mb-6 flex justify-between", children: [_jsx("div", { className: "text-xl font-bold", children: "Debug Tools" }), _jsx("button", { id: "close-modal", onClick: () => closePHModal(), children: _jsx(Icon, { name: "Xmark", size: 28 }) })] }), _jsxs("div", { className: "flex text-sm font-bold", children: [_jsx(Icon, { name: "Ring", size: 22 }), _jsxs("span", { className: "ml-2", children: ["App Version: ", connectConfig.appVersion] })] }), _jsxs("div", { className: "mt-4 flex text-sm font-bold", children: [_jsx(Icon, { name: "Hdd", size: 22 }), _jsx("span", { className: "ml-2", children: "Drive Tools:" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "selectedDrive", className: "text-xs", children: "Selected Drive:" }), _jsx(Combobox, { id: "selectedDrive", onChange: (value) => {
                                if (!value ||
                                    !(typeof value === "object") ||
                                    !("value" in value)) {
                                    setSelectedDrive(undefined);
                                    setSelectedDriveTrigger(null);
                                    return;
                                }
                                setSelectedDrive(value.value);
                                setSelectedDriveTrigger(null);
                            }, options: drives?.map((drive) => ({
                                label: drive.header.name,
                                value: drive.header.id,
                            })) })] }), _jsx("div", { className: "mt-2 flex items-end justify-between pl-4", children: _jsxs("div", { className: "w-[400px]", children: [_jsx("label", { htmlFor: "autoRegisterPullResponder", className: "text-xs", children: "Auto register pull responder:" }), _jsx(Combobox, { id: "autoRegisterPullResponder", onChange: (value) => {
                                    handleDisableAutoResiterPullResponder(value);
                                }, value: autoRegister, options: [
                                    { label: "Enabled", value: "true" },
                                    { label: "Disabled", value: "false" },
                                ] })] }) }), _jsxs("div", { className: "mt-2 flex items-end justify-between pl-4", children: [_jsxs("div", { className: "w-[400px]", children: [_jsx("label", { htmlFor: "driveTrigger", className: "text-xs", children: "Drive trigger:" }), _jsx(Combobox, { id: "driveTrigger", onChange: (value) => {
                                        setSelectedDriveTrigger(value);
                                    }, value: selectedDriveTrigger, options: driveTriggers.map((trigger) => ({
                                        label: `${trigger.id} - ${trigger.type}`,
                                        value: trigger.id,
                                    })) })] }), _jsx("div", { children: _jsx(PowerhouseButton, { onClick: removeTriggerHandler, color: !selectedDriveTrigger ? "light" : "red", disabled: !selectedDriveTrigger, size: "small", children: "Remove Trigger" }) })] }), _jsxs("div", { className: "mt-2 flex items-end justify-between pl-4", children: [_jsxs("div", { className: "w-[400px]", children: [_jsx("label", { htmlFor: "driveUrl", className: "text-xs", children: "Add drive trigger:" }), _jsx(FormInput, { containerClassName: "p-1 bg-white border border-gray-200 rounded-md text-sm", inputClassName: "text-xs font-normal", id: "driveUrl", icon: _jsx("div", { className: "flex h-full items-center text-xs", children: "URL:" }), value: driveUrl, onChange: (element) => setDriveUrl(element.target.value) })] }), _jsxs("div", { className: "mb-1 flex items-center justify-center", children: [_jsx(PowerhouseButton, { className: "mr-2", color: disableUrlButtons ? "light" : "blue", size: "small", disabled: disableUrlButtons, onClick: () => addTriggerHandler(), children: "Add Trigger" }), _jsx(PowerhouseButton, { color: disableUrlButtons ? "light" : "red", size: "small", disabled: disableUrlButtons, onClick: () => addTriggerHandler(true), children: "Add Invalid Trigger" })] })] }), _jsxs("div", { className: "mt-4 flex text-sm font-bold", children: [_jsx(Icon, { name: "Gear", size: 22 }), _jsx("span", { className: "ml-2", children: "Service Worker Tools:" })] }), _jsx("div", { className: "mt-2 flex items-end justify-between pl-4", children: _jsxs("div", { className: "w-[400px]", children: [_jsx("label", { htmlFor: "serviceWorkerDebugMode", className: "text-xs", children: "Service Worker Debug Mode:" }), _jsx(Combobox, { id: "serviceWorkerDebugMode", onChange: (value) => {
                                    setServiceWorkerDebugMode(value);
                                }, value: serviceWorkerDebugMode, options: [
                                    { label: "Enabled", value: true },
                                    { label: "Disabled", value: false },
                                ] })] }) }), _jsxs("div", { className: "mt-2 flex items-end justify-between pl-4", children: [_jsxs("div", { className: "w-[400px]", children: [_jsx("label", { htmlFor: "appVersion", className: "text-xs", children: "Set invalid app version:" }), _jsx(FormInput, { containerClassName: "p-1 bg-white border border-gray-200 rounded-md text-sm", inputClassName: "text-xs font-normal", id: "appVersion", icon: _jsx("div", { className: "flex h-full items-center text-xs", children: "Version:" }), value: appVersion, onChange: (element) => setAppVersion(element.target.value) })] }), _jsx("div", { className: "mb-1 flex items-center justify-center", children: _jsx(PowerhouseButton, { color: appVersion === "" ? "light" : "red", size: "small", disabled: appVersion === "", onClick: () => {
                                    // @ts-expect-error todo add send message method to service worker manager class
                                    serviceWorkerManager.sendMessage({
                                        type: "SET_APP_VERSION",
                                        version: appVersion,
                                    });
                                    setAppVersion("");
                                }, children: "Add Invalid App Version" }) })] })] }) }));
};
//# sourceMappingURL=DebugSettingsModal.js.map