"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InspectorLocationCopy = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const format_file_location_1 = require("../helpers/format-file-location");
const clipboard_1 = require("../icons/clipboard");
const InlineAction_1 = require("./InlineAction");
const NotificationCenter_1 = require("./Notifications/NotificationCenter");
const row = {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'row',
    minWidth: 0,
    width: '100%',
};
const content = {
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    minWidth: 0,
    overflow: 'hidden',
};
const action = {
    flexShrink: 0,
    height: 24,
    marginLeft: 4,
    marginRight: -4,
};
const icon = {
    flexShrink: 0,
    height: 12,
    width: 12,
};
const InspectorLocationCopy = ({ children, location, name }) => {
    const [hovered, setHovered] = (0, react_1.useState)(false);
    const [focusedWithin, setFocusedWithin] = (0, react_1.useState)(false);
    const textToCopy = (0, react_1.useMemo)(() => {
        return (0, format_file_location_1.formatLocationForAgents)({
            location,
            name,
            root: window.remotion_cwd,
        });
    }, [location, name]);
    const renderCopyAction = (0, react_1.useCallback)((color) => {
        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: icon, color: color });
    }, []);
    const onCopy = (0, react_1.useCallback)((event) => {
        event.stopPropagation();
        if (!textToCopy) {
            return;
        }
        navigator.clipboard.writeText(textToCopy).catch((err) => {
            (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
        });
    }, [textToCopy]);
    const showAction = hovered || focusedWithin;
    return (jsx_runtime_1.jsxs("div", { style: row, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocusedWithin(true), onBlur: () => setFocusedWithin(false), children: [
            jsx_runtime_1.jsx("div", { style: content, children: children }), textToCopy ? (jsx_runtime_1.jsx("div", { style: {
                    ...action,
                    opacity: showAction ? 1 : 0,
                    pointerEvents: showAction ? 'auto' : 'none',
                }, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onCopy, renderAction: renderCopyAction, title: "Copy location for agents" }) })) : null] }));
};
exports.InspectorLocationCopy = InspectorLocationCopy;
