import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn, Icon } from "@powerhousedao/design-system";
import { capitalCase } from "change-case";
import { getDriveSharingType } from "document-drive";
import { useState } from "react";
import { ConnectDropdownMenu } from "../../dropdown-menu/dropdown-menu.js";
export function DangerZone(props) {
    const { className, ...rest } = props;
    return (_jsxs("div", { className: cn("h-full rounded-lg bg-white p-3", className), children: [_jsx("h2", { className: "mb-4 font-semibold", children: "Modify Drives" }), _jsx(ModifyDrives, { ...rest }), _jsx("h2", { className: "my-4 font-semibold", children: "Local Storage" }), _jsx(LocalStorage, { ...rest })] }));
}
function ModifyDrives(props) {
    const { className, ...rest } = props;
    return (_jsx("div", { className: className, children: _jsx(DriveList, { ...rest }) }));
}
function DriveList(props) {
    const { className, ...rest } = props;
    return (_jsx("div", { className: className, children: props.drives.map((drive) => (_jsx(Drive, { drive: drive, ...rest }, drive.header.id))) }));
}
function Drive(props) {
    const { drive, className, onDeleteDrive } = props;
    const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
    const localDriveIcon = _jsx(Icon, { name: "Hdd", size: 16, className: "flex-none" });
    const cloudDriveIcon = _jsx(Icon, { name: "Server", size: 16, className: "flex-none" });
    const publicDriveIcon = drive.state.global.icon ? (_jsx("img", { alt: "drive icon", className: "size-4 flex-none object-contain", src: drive.state.global.icon })) : (_jsx(Icon, { name: "Server", size: 16, className: "flex-none" }));
    function getNodeIcon() {
        const sharingType = getDriveSharingType(drive);
        if (sharingType === "PUBLIC") {
            return publicDriveIcon;
        }
        if (sharingType === "CLOUD") {
            return cloudDriveIcon;
        }
        return localDriveIcon;
    }
    const icon = getNodeIcon();
    return (_jsxs("div", { className: cn("mb-4 flex w-96 items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-2 shadow-sm last-of-type:mb-0", className), children: [icon, _jsxs("div", { children: [_jsx("span", { className: "block text-sm font-medium leading-[18px]", children: capitalCase(drive.header.name) }), _jsxs("div", { className: "flex items-baseline gap-x-2 leading-[18px]", children: [_jsxs("span", { className: "text-sm text-gray-600", children: [capitalCase(getDriveSharingType(drive)), " App"] }), _jsxs("a", { href: "https://www.powerhouse.inc/", target: "_blank", rel: "noopener noreferrer", className: "group flex items-center gap-x-2 text-sm text-slate-500 transition-colors hover:text-[#9896FF]", children: ["By Powerhouse", _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", className: "size-4 text-gray-400 transition-colors group-hover:text-inherit", children: _jsx("path", { d: "M7.99365 11.9939C9.46632 11.9939 10.6603 10.7999 10.6603 9.32722V7.32722C10.6603 6.95922 10.3617 6.66056 9.99365 6.66056C9.62565 6.66056 9.32699 6.95922 9.32699 7.32722V9.32722C9.32699 10.0639 8.73032 10.6606 7.99365 10.6606H2.66032C1.92365 10.6606 1.32699 10.0639 1.32699 9.32722V3.99389C1.32699 3.25723 1.92365 2.66056 2.66032 2.66056H4.66032C5.02832 2.66056 5.32699 2.36189 5.32699 1.99389C5.32699 1.6259 5.02832 1.32723 4.66032 1.32723H2.66032C1.18765 1.32723 -0.00634766 2.52123 -0.00634766 3.99389V9.32722C-0.00634766 10.7999 1.18765 11.9939 2.66032 11.9939H7.99365ZM5.32699 7.32722C5.49765 7.32722 5.67565 7.26989 5.80632 7.13989L10.1396 2.80656L11.9937 4.66056V-0.00610352H7.32699L9.18099 1.8479L4.84766 6.18123C4.58766 6.4419 4.58766 6.87922 4.84766 7.13989C4.97832 7.26989 5.15632 7.32722 5.32699 7.32722Z", fill: "currentColor" }) })] })] })] }), _jsx(ConnectDropdownMenu, { items: [
                    {
                        id: "delete-drive",
                        label: "Delete",
                        icon: _jsx(Icon, { name: "Trash" }),
                        className: "text-red-900",
                    },
                ], onItemClick: (id) => {
                    if (id === "delete-drive") {
                        onDeleteDrive(drive);
                    }
                }, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: _jsx("button", { className: "group ml-auto flex-none", onClick: (e) => {
                        e.stopPropagation();
                        setIsDropdownMenuOpen(true);
                    }, children: _jsx(Icon, { className: "text-gray-600 group-hover:text-gray-900", name: "VerticalDots", size: 16 }) }) })] }));
}
function LocalStorage(props) {
    const { onClearStorage } = props;
    return (_jsx("div", { children: _jsxs("button", { className: "flex items-center gap-x-2 rounded-md border border-gray-300 bg-transparent px-3 py-1 text-sm font-medium text-red-900 transition-colors hover:bg-gray-100", onClick: onClearStorage, children: ["Clear Storage ", _jsx(Icon, { name: "Trash", size: 16 })] }) }));
}
//# sourceMappingURL=danger-zone.js.map