import React, { useState } from "react";
import { FinsembleDraggable } from "../../../legacyControls/FinsembleDraggable";
export const WorkspaceEditor = (props) => {
    const [value, setValue] = useState(props.value || "");
    const initialWorkspaceName = props.value || "";
    const onKeyDown = (e) => {
        var _a, _b;
        if (e.key === "Escape") {
            setValue(initialWorkspaceName);
            (_a = props.cancelHandler) === null || _a === void 0 ? void 0 : _a.call(props);
        }
        else if (e.key === "Enter") {
            (_b = props.saveHandler) === null || _b === void 0 ? void 0 : _b.call(props, e.target.value);
        }
    };
    const onChange = (e) => {
        setValue(e.target.value);
    };
    const onFocus = (e) => {
        e.target.select();
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("input", { onFocus: onFocus, autoFocus: true, value: value, className: "workspace-editor", onChange: onChange, onKeyDown: onKeyDown }),
        React.createElement("div", { className: "individual-workspace-actions" },
            React.createElement("div", { title: "Save", className: "individual-workspace-action", onClick: () => {
                    var _a;
                    (_a = props.saveHandler) === null || _a === void 0 ? void 0 : _a.call(props, value);
                } },
                React.createElement("i", { className: "ff-check-mark" })),
            React.createElement("div", { title: "Cancel", className: "individual-workspace-action", onClick: () => {
                    var _a;
                    setValue(initialWorkspaceName);
                    (_a = props.cancelHandler) === null || _a === void 0 ? void 0 : _a.call(props);
                } },
                React.createElement("i", { className: "ff-close" })))));
};
const WorkspaceItem = (props) => {
    var _a, _b;
    let baseClass = "workspace-item";
    let classNames = baseClass;
    if (props.activeWorkspaceName === props.workspace.name) {
        classNames = `${classNames} active-workspace`;
    }
    if (props.workspaceToLoadOnStart === props.workspace.name) {
        classNames = `${classNames} auto-start-workspace-item`;
    }
    if (props.focusedWorkspace === props.workspace.name) {
        classNames = `${classNames} focused-workspace-item`;
        if (props.i === 0) {
            classNames = `${classNames} no-top-border`;
        }
        if (props.editing || props.adding) {
            classNames = `${classNames} workspace-item-editing`;
            return (React.createElement("div", { key: props.i, className: classNames },
                React.createElement(WorkspaceEditor, { value: props.workspace.name || "", saveHandler: props.editing ? props.renameWorkspace : props.addWorkspace, cancelHandler: props.cancelEdit })));
        }
    }
    return (React.createElement(FinsembleDraggable, { onClick: () => {
            var _a;
            (_a = props.setFocusedWorkspace) === null || _a === void 0 ? void 0 : _a.call(props, props.workspace.name);
        }, wrapperClass: classNames, draggableId: props.workspace.name || "", index: props.i || 0, onKeydown: (e) => {
            var _a, _b;
            if (e.code === "F2") {
                props.allowRename && ((_a = props.startEditingWorkspace) === null || _a === void 0 ? void 0 : _a.call(props, e, props.workspace.name || ""));
            }
            else if (e.code === "Delete") {
                props.allowDelete && ((_b = props.deleteWorkspace) === null || _b === void 0 ? void 0 : _b.call(props, props.workspace.name || ""));
            }
        } },
        React.createElement("div", { className: "ff-adp-hamburger" }),
        React.createElement("div", { className: "workspace-name", title: props.workspace.name }, props.workspace.name),
        React.createElement("div", { className: "individual-workspace-actions" }, props.workspace.name !== props.activeWorkspaceName &&
            !((_a = props.permanentWorkspaces) === null || _a === void 0 ? void 0 : _a.includes((_b = props.workspace.name) !== null && _b !== void 0 ? _b : "")) && (React.createElement(React.Fragment, null,
            React.createElement("div", { title: props.renameTooltip, className: props.renameButtonClasses, onMouseDown: props.handleButtonClicks, onClick: (e) => {
                    var _a;
                    props.allowRename && ((_a = props.startEditingWorkspace) === null || _a === void 0 ? void 0 : _a.call(props, e, props.workspace.name || ""));
                } },
                React.createElement("i", { className: "ff-adp-edit" })),
            React.createElement("div", { title: props.deleteTooltip, className: props.deleteButtonClasses, onMouseDown: props.handleButtonClicks, onClick: () => {
                    var _a;
                    props.allowDelete && ((_a = props.deleteWorkspace) === null || _a === void 0 ? void 0 : _a.call(props, props.workspace.name || ""));
                } },
                React.createElement("i", { className: "ff-adp-trash-outline" })))))));
};
export default WorkspaceItem;
//# sourceMappingURL=WorkspaceItem.js.map