"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.AssetFolderTree = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const studio_shared_1 = require("@remotion/studio-shared");
const react_1 = require("react");
const remotion_1 = require("remotion");
const no_react_1 = require("remotion/no-react");
const delete_static_file_1 = require("../api/delete-static-file");
const client_id_1 = require("../helpers/client-id");
const colors_1 = require("../helpers/colors");
const copy_text_1 = require("../helpers/copy-text");
const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
const mobile_layout_1 = require("../helpers/mobile-layout");
const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
const url_state_1 = require("../helpers/url-state");
const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
const clipboard_1 = require("../icons/clipboard");
const file_1 = require("../icons/file");
const folder_1 = require("../icons/folder");
const modals_1 = require("../state/modals");
const sidebar_1 = require("../state/sidebar");
const ConfirmationDialog_1 = require("./ConfirmationDialog");
const ContextMenu_1 = require("./ContextMenu");
const import_assets_1 = require("./import-assets");
const InlineAction_1 = require("./InlineAction");
const layout_1 = require("./layout");
const styles_1 = require("./Menu/styles");
const NotificationCenter_1 = require("./Notifications/NotificationCenter");
const actions_1 = require("./RenderQueue/actions");
const ASSET_ITEM_HEIGHT = 32;
const iconStyle = {
    width: 18,
    height: 18,
    flexShrink: 0,
};
const itemStyle = {
    paddingRight: 10,
    paddingTop: 6,
    paddingBottom: 6,
    fontSize: 13,
    display: 'flex',
    textDecoration: 'none',
    cursor: 'default',
    alignItems: 'center',
    marginBottom: 1,
    appearance: 'none',
    border: 'none',
    width: '100%',
    textAlign: 'left',
    backgroundColor: colors_1.BACKGROUND,
    height: ASSET_ITEM_HEIGHT,
    userSelect: 'none',
    WebkitUserSelect: 'none',
};
const labelStyle = {
    textAlign: 'left',
    textDecoration: 'none',
    fontSize: 13,
    flex: '1 1 0%',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
};
const revealIconStyle = {
    height: 12,
    color: colors_1.CURRENT_COLOR,
};
const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dropLocation, setDropLocation, readOnlyStudio, }) => {
    const [hovered, setHovered] = (0, react_1.useState)(false);
    const openFolderTimerRef = (0, react_1.useRef)(null);
    const { isDropDiv, onDragEnter, onDragLeave } = (0, use_asset_drag_events_1.default)({
        name: item.name,
        parentFolder,
        dropLocation,
        setDropLocation,
    });
    const onPointerEnter = (0, react_1.useCallback)(() => {
        setHovered(true);
    }, []);
    const onPointerLeave = (0, react_1.useCallback)(() => {
        setHovered(false);
    }, []);
    const folderStyle = (0, react_1.useMemo)(() => {
        return {
            ...itemStyle,
            paddingLeft: 4 + level * 8,
            backgroundColor: hovered ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
        };
    }, [hovered, level]);
    const label = (0, react_1.useMemo)(() => {
        return {
            ...labelStyle,
            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
        };
    }, [hovered]);
    const onClick = (0, react_1.useCallback)(() => {
        toggleFolder(item.name, parentFolder);
    }, [item.name, parentFolder, toggleFolder]);
    const Icon = item.expanded ? folder_1.ExpandedFolderIcon : folder_1.CollapsedFolderIcon;
    return (jsx_runtime_1.jsxs("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, style: {
            backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
        }, children: [
            jsx_runtime_1.jsx("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, onDragEnter: (event) => {
                    if (!(0, use_asset_drag_events_1.isFileDragEvent)(event)) {
                        return;
                    }
                    if (!item.expanded) {
                        openFolderTimerRef.current = window.setTimeout(() => {
                            toggleFolder(item.name, parentFolder);
                        }, 1000);
                    }
                }, onDragLeave: (event) => {
                    if (!(0, use_asset_drag_events_1.isFileDragEvent)(event)) {
                        return;
                    }
                    if (openFolderTimerRef.current) {
                        clearTimeout(openFolderTimerRef.current);
                    }
                }, children: jsx_runtime_1.jsxs(layout_1.Row, { children: [
                        jsx_runtime_1.jsx(Icon, { style: iconStyle, color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name })
                    ] }) }), item.expanded ? (jsx_runtime_1.jsx(exports.AssetFolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }, item.name)) : null] }));
};
const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabIndex, dropLocation, setDropLocation, readOnlyStudio, }) => {
    const combinedParents = (0, react_1.useMemo)(() => {
        return [parentFolder, name].filter(no_react_1.NoReactInternals.truthy).join('/');
    }, [name, parentFolder]);
    return (jsx_runtime_1.jsxs("div", { children: [item.folders.map((folder) => {
                return (jsx_runtime_1.jsx(AssetFolderItem, { item: folder, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }, folder.name));
            }), item.files.map((file) => {
                return (jsx_runtime_1.jsx(AssetSelectorItem, { item: file, tabIndex: tabIndex, level: level, parentFolder: combinedParents, readOnlyStudio: readOnlyStudio }, file.src));
            })] }));
};
exports.AssetFolderTree = AssetFolderTree;
const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }) => {
    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
    const [hovered, setHovered] = (0, react_1.useState)(false);
    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
        .previewServerState.type;
    const onPointerEnter = (0, react_1.useCallback)(() => {
        setHovered(true);
    }, []);
    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
    const relativePath = (0, react_1.useMemo)(() => {
        return parentFolder ? parentFolder + '/' + item.name : item.name;
    }, [parentFolder, item.name]);
    const selected = (0, react_1.useMemo)(() => {
        if (canvasContent && canvasContent.type === 'asset') {
            return canvasContent.asset === relativePath;
        }
        return false;
    }, [canvasContent, relativePath]);
    const canDragAsset = (0, react_1.useMemo)(() => {
        return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
    }, [readOnlyStudio, relativePath]);
    const onPointerLeave = (0, react_1.useCallback)(() => {
        setHovered(false);
    }, []);
    const rowRef = (0, react_1.useRef)(null);
    (0, react_1.useLayoutEffect)(() => {
        (0, sidebar_scroll_into_view_1.maybeScrollAssetSidebarRowIntoView)({
            element: rowRef.current,
            assetPath: relativePath,
            selected,
        });
    }, [relativePath, selected]);
    const onClick = (0, react_1.useCallback)(() => {
        (0, sidebar_scroll_into_view_1.markAssetSidebarScrollFromRowClick)(relativePath);
        setCanvasContent({ type: 'asset', asset: relativePath });
        (0, url_state_1.pushUrl)(`/assets/${relativePath}`);
        if (isMobileLayout) {
            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
        }
    }, [
        isMobileLayout,
        relativePath,
        setCanvasContent,
        setSidebarCollapsedState,
    ]);
    const onDragStart = (0, react_1.useCallback)((e) => {
        if (!canDragAsset) {
            e.preventDefault();
            return;
        }
        setIsDragging(true);
        e.dataTransfer.effectAllowed = 'copy';
        e.dataTransfer.setData(studio_shared_1.ASSET_DRAG_MIME_TYPE, JSON.stringify((0, studio_shared_1.makeAssetDragData)(relativePath)));
    }, [canDragAsset, relativePath]);
    const onDragEnd = (0, react_1.useCallback)(() => {
        setIsDragging(false);
    }, []);
    const style = (0, react_1.useMemo)(() => {
        return {
            ...itemStyle,
            color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
            backgroundColor: hovered
                ? selected
                    ? colors_1.SELECTED_BACKGROUND
                    : colors_1.WHITE_ALPHA_06
                : selected
                    ? colors_1.SELECTED_BACKGROUND
                    : colors_1.TRANSPARENT,
            paddingLeft: 12 + level * 8,
        };
    }, [hovered, level, selected]);
    const label = (0, react_1.useMemo)(() => {
        return {
            ...labelStyle,
            color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
        };
    }, [hovered, selected]);
    const renderFileExplorerAction = (0, react_1.useCallback)((color) => {
        return jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: revealIconStyle, color: color });
    }, []);
    const renderCopyAction = (0, react_1.useCallback)((color) => {
        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
    }, []);
    const copyFileName = (0, react_1.useCallback)(() => {
        (0, copy_text_1.copyText)(item.name)
            .then(() => {
            (0, NotificationCenter_1.showNotification)(`Copied '${item.name}' to clipboard`, 1000);
        })
            .catch((err) => {
            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
        });
    }, [item.name]);
    const copyStaticFilePath = (0, react_1.useCallback)(() => {
        const content = `staticFile("${relativePath}")`;
        (0, copy_text_1.copyText)(content)
            .then(() => {
            (0, NotificationCenter_1.showNotification)(`Copied '${content}' to clipboard`, 1000);
        })
            .catch((err) => {
            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
        });
    }, [relativePath]);
    const openAssetInExplorer = (0, react_1.useCallback)(() => {
        if (!window.remotion_publicFolderExists) {
            (0, NotificationCenter_1.showNotification)('Could not find the public folder', 2000);
            return;
        }
        (0, actions_1.openInFileExplorer)({
            directory: window.remotion_publicFolderExists + '/' + relativePath,
        }).catch((err) => {
            (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
        });
    }, [relativePath]);
    const serverActionDisabled = readOnlyStudio || connectionStatus !== 'connected';
    const deleteAsset = (0, react_1.useCallback)(() => {
        confirm({
            title: 'Delete asset',
            message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Do you want to delete the asset", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: relativePath }),
                    " from your public folder?"] })),
            confirmLabel: 'Delete',
        })
            .then((confirmed) => {
            if (!confirmed) {
                return;
            }
            const notification = (0, NotificationCenter_1.showNotification)(`Deleting ${relativePath}...`, null);
            (0, delete_static_file_1.deleteStaticFile)(relativePath)
                .then(() => {
                notification.replaceContent(`Deleted ${relativePath}`, 2000);
            })
                .catch((err) => {
                notification.replaceContent(`Could not delete ${relativePath}: ${err.message}`, 3000);
            });
        })
            .catch((err) => {
            (0, NotificationCenter_1.showNotification)(`Could not delete ${relativePath}: ${err.message}`, 3000);
        });
    }, [confirm, relativePath]);
    const contextMenu = (0, react_1.useMemo)(() => {
        return [
            {
                id: 'copy-asset-file-name',
                keyHint: null,
                label: 'Copy file name',
                leftItem: null,
                onClick: copyFileName,
                quickSwitcherLabel: 'Copy asset file name',
                subMenu: null,
                type: 'item',
                value: 'copy-asset-file-name',
            },
            {
                id: 'copy-asset-static-file-path',
                keyHint: null,
                label: 'Copy staticFile() path',
                leftItem: null,
                onClick: copyStaticFilePath,
                quickSwitcherLabel: 'Copy staticFile() path',
                subMenu: null,
                type: 'item',
                value: 'copy-asset-static-file-path',
            },
            {
                type: 'divider',
                id: 'asset-file-actions-divider',
            },
            {
                id: 'open-asset-in-explorer',
                keyHint: null,
                label: `Show in ${fileManagerName}`,
                leftItem: null,
                onClick: openAssetInExplorer,
                quickSwitcherLabel: `Show asset in ${fileManagerName}`,
                subMenu: null,
                type: 'item',
                value: 'open-asset-in-explorer',
                disabled: serverActionDisabled || window.remotion_publicFolderExists === null,
            },
            {
                id: 'rename-asset',
                keyHint: null,
                label: 'Rename...',
                leftItem: null,
                onClick: () => {
                    setSelectedModal({
                        type: 'rename-static-file',
                        relativePath,
                    });
                },
                quickSwitcherLabel: 'Rename asset...',
                subMenu: null,
                type: 'item',
                value: 'rename-asset',
                disabled: serverActionDisabled,
            },
            {
                id: 'delete-asset',
                keyHint: null,
                label: 'Delete...',
                leftItem: null,
                onClick: deleteAsset,
                quickSwitcherLabel: 'Delete asset...',
                subMenu: null,
                type: 'item',
                value: 'delete-asset',
                disabled: serverActionDisabled,
            },
        ];
    }, [
        copyFileName,
        copyStaticFilePath,
        deleteAsset,
        fileManagerName,
        openAssetInExplorer,
        relativePath,
        serverActionDisabled,
        setSelectedModal,
    ]);
    const revealInExplorer = (0, react_1.useCallback)((e) => {
        e.stopPropagation();
        openAssetInExplorer();
    }, [openAssetInExplorer]);
    const copyToClipboard = (0, react_1.useCallback)((e) => {
        e.stopPropagation();
        copyStaticFilePath();
    }, [copyStaticFilePath]);
    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
                    jsx_runtime_1.jsx(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), serverActionDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
                                ] }))] })) : null] }) }) }));
};
