import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { PowerhouseButton } from "@powerhousedao/design-system";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useDebounceValue } from "usehooks-ts";
import { Disclosure } from "../disclosure/disclosure.js";
import { Divider } from "../divider/divider.js";
import { FormInput } from "../form-input/form-input.js";
import { AvailableOfflineToggle } from "./inputs/available-offline-toggle.js";
import { DriveName } from "./inputs/drive-name.js";
import { LocationInfo } from "./inputs/location-info.js";
export function AddRemoteDriveForm(props) {
    const { sharingType = "PUBLIC", requestPublicDrive } = props;
    const [remoteDriveDetails, setPublicDriveDetails] = useState();
    const [showLocationSettings, setShowLocationSettings] = useState(false);
    const [isUrlValid, setIsUrlValid] = useState(true);
    const [hasConfirmedUrl, setHasConfirmedUrl] = useState(false);
    const [errorMessage, setErrorMessage] = useState("");
    const [url, setUrl] = useState("");
    const [debouncedUrl, setDebouncedUrl] = useDebounceValue(url, 500);
    const { register, handleSubmit, setValue } = useForm({
        mode: "onBlur",
        defaultValues: {
            availableOffline: remoteDriveDetails?.availableOffline ?? false,
        },
    });
    useEffect(() => {
        setDebouncedUrl(url);
    }, [url]);
    useEffect(() => {
        setHasConfirmedUrl(false);
        if (debouncedUrl === "")
            return;
        fetchPublicDrive().catch(console.error);
        async function fetchPublicDrive() {
            try {
                const { id, name } = await requestPublicDrive(debouncedUrl);
                setPublicDriveDetails({
                    id,
                    name,
                    sharingType,
                    location: "SWITCHBOARD",
                    availableOffline: true,
                });
                setValue("availableOffline", true);
                setIsUrlValid(true);
                setErrorMessage("");
            }
            catch (error) {
                setPublicDriveDetails(undefined);
                setIsUrlValid(false);
                setErrorMessage(error.message);
            }
        }
    }, [debouncedUrl, setValue, sharingType]);
    function onSubmit({ availableOffline }) {
        if (!remoteDriveDetails)
            return;
        props.onSubmit({
            ...remoteDriveDetails,
            availableOffline,
            url: debouncedUrl,
        });
    }
    return (_jsx("form", { onSubmit: handleSubmit(onSubmit), children: hasConfirmedUrl ? (_jsxs(_Fragment, { children: [_jsx(DriveName, { driveName: remoteDriveDetails?.name ?? "New drive" }), _jsx(Divider, { className: "my-3" }), _jsxs(Disclosure, { isOpen: showLocationSettings, onOpenChange: () => setShowLocationSettings(!showLocationSettings), title: "Location", children: [_jsx(LocationInfo, { location: "SWITCHBOARD" }), _jsx(AvailableOfflineToggle, { ...register("availableOffline") })] }), _jsx(PowerhouseButton, { className: "mt-4 w-full", color: "dark", type: "submit", children: "Add new drive" })] })) : (_jsxs(_Fragment, { children: [_jsx(FormInput, { errorMessage: errorMessage, onChange: (e) => setUrl(e.target.value), placeholder: "Drive URL", required: true, type: "url", value: url }), _jsx(PowerhouseButton, { className: "mt-4 w-full py-2 text-base", color: "dark", size: "small", disabled: !isUrlValid || url === "", onClick: (e) => {
                        e.preventDefault();
                        setHasConfirmedUrl(true);
                    }, type: "button", children: "Add drive" })] })) }));
}
//# sourceMappingURL=add-remote-drive-form.js.map