import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { addFolder, setSelectedDrive, setSelectedNode, useSelectedDriveId, useSelectedDriveSafe, useSelectedNodePath, useUserPermissions, } from "@powerhousedao/reactor-browser";
import { Fragment, useState } from "react";
import { NodeInput } from "../node-input/node-input.js";
export function Breadcrumbs() {
    const { isAllowedToCreateDocuments } = useUserPermissions();
    const [selectedDrive] = useSelectedDriveSafe();
    const selectedDriveId = useSelectedDriveId();
    const selectedNodePath = useSelectedNodePath();
    const [isCreating, setIsCreating] = useState(false);
    function onAddNew() {
        setIsCreating(true);
    }
    function onSubmit(name) {
        if (!isAllowedToCreateDocuments || !selectedDriveId)
            return;
        addFolder(selectedDriveId, name, selectedNodePath.at(-1)?.id)
            .then((node) => {
            setSelectedNode(node);
        })
            .catch((error) => {
            console.error(error);
        })
            .finally(() => {
            setIsCreating(false);
        });
    }
    function onCancel() {
        setIsCreating(false);
    }
    const hasSelectedDrive = !!selectedDrive;
    const hasNodePath = !!selectedNodePath.length;
    return (_jsxs("div", { className: "flex h-9 flex-row items-center gap-2 p-6 text-gray-500", children: [hasSelectedDrive && (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { name: selectedDrive.state.global.name, onClick: () => setSelectedDrive(selectedDrive) }), _jsx("span", { children: "/" })] })), hasNodePath &&
                selectedNodePath.map((node) => (_jsxs(Fragment, { children: [_jsx(Breadcrumb, { name: node.name, onClick: () => setSelectedNode(node) }), _jsx("span", { children: "/" })] }, node.id))), isAllowedToCreateDocuments &&
                (isCreating ? (_jsx(NodeInput, { className: "text-gray-800", defaultValue: "New Folder", onCancel: onCancel, onSubmit: onSubmit, placeholder: "New Folder" })) : (_jsxs("button", { type: "button", className: "ml-1 flex items-center justify-center gap-2 rounded-md bg-gray-50 px-2 py-1.5 transition-colors hover:bg-gray-200 hover:text-gray-800", onClick: onAddNew, children: [_jsx(Icon, { name: "Plus", size: 14 }), "Add new"] })))] }));
}
export function Breadcrumb(props) {
    const { name, onClick } = props;
    return (_jsx("div", { className: "transition-colors last-of-type:text-gray-800 hover:text-gray-800", onClick: onClick, role: "button", children: name }));
}
//# sourceMappingURL=breadcrumbs.js.map