"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var sidebar_exports = {};
__export(sidebar_exports, {
  default: () => sidebar_default
});
module.exports = __toCommonJS(sidebar_exports);
var import_buffer = __toESM(require("buffer"));
var import_browser = __toESM(require("process/browser"));
var import_console_browserify = __toESM(require("console-browserify"));
var buffer = {
  Buffer: import_buffer.default
};
var import_jsx_runtime = require("react/jsx-runtime");
var import_store = require("./store");
var import_icons = require("@ant-design/icons");
var import_ui_utils = require("@midscene/web/ui-utils");
var import_react = require("react");
var import_misc = require("./misc");
var import_panel_title = __toESM(require("./panel-title"));
var import_sidebar = require("./sidebar.css");
const SideItem = (props) => {
  var _a;
  const { task, onClick, selected } = props;
  const selectedClass = selected ? "selected" : "";
  let statusText = task.status;
  if ((_a = task.timing) == null ? void 0 : _a.cost) {
    statusText = (0, import_misc.timeCostStrElement)(task.timing.cost);
  }
  const statusIcon = task.status === "finished" && task.error ? (0, import_misc.iconForStatus)("finishedWithWarning") : (0, import_misc.iconForStatus)(task.status);
  const titleTextIcon = task.type === "Planning" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "inline-block", marginLeft: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.VideoCameraOutlined, {}) }) : null;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "div",
    {
      className: `side-item ${selectedClass}`,
      onClick,
      onMouseEnter: (event) => {
        var _a2;
        const rect = event.currentTarget.getBoundingClientRect();
        const x = rect.left + rect.width;
        const y = rect.top;
        (_a2 = props.onItemHover) == null ? void 0 : _a2.call(props, task, x, y);
      },
      onMouseLeave: () => {
        var _a2;
        (_a2 = props.onItemHover) == null ? void 0 : _a2.call(props, null);
      },
      children: [
        " ",
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "side-item-name", children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "status-icon", children: statusIcon }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "title", children: [
            (0, import_ui_utils.typeStr)(task),
            " ",
            titleTextIcon
          ] }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "status-text", children: statusText })
        ] })
      ]
    }
  );
};
const Sidebar = () => {
  const sdkVersion = (0, import_store.useExecutionDump)((store) => store.sdkVersion);
  const modelName = (0, import_store.useExecutionDump)((store) => store.modelName);
  const groupedDump = (0, import_store.useExecutionDump)((store) => store.dump);
  const setActiveTask = (0, import_store.useExecutionDump)((store) => store.setActiveTask);
  const activeTask = (0, import_store.useExecutionDump)((store) => store.activeTask);
  const setHoverTask = (0, import_store.useExecutionDump)((store) => store.setHoverTask);
  const setHoverPreviewConfig = (0, import_store.useExecutionDump)(
    (store) => store.setHoverPreviewConfig
  );
  const reset = (0, import_store.useExecutionDump)((store) => store.reset);
  const allTasks = (0, import_store.useAllCurrentTasks)();
  const currentSelectedIndex = allTasks == null ? void 0 : allTasks.findIndex(
    (task) => task === activeTask
  );
  (0, import_react.useEffect)(() => {
    const handleKeyDown = (e) => {
      if (!(allTasks == null ? void 0 : allTasks.length) || (allTasks == null ? void 0 : allTasks.length) <= 1) {
        return;
      }
      if (e.key === "ArrowUp" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        const nextIndex = currentSelectedIndex - 1;
        if (nextIndex < 0) {
          return;
        }
        const nextTask = allTasks[nextIndex];
        setActiveTask(nextTask);
      } else if (e.key === "ArrowDown" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        const nextIndex = currentSelectedIndex + 1;
        if (nextIndex >= allTasks.length) {
          return;
        }
        const nextTask = allTasks[nextIndex];
        setActiveTask(nextTask);
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [currentSelectedIndex, allTasks, setActiveTask]);
  const envInfo = sdkVersion ? `v${sdkVersion}, ${modelName || "default model"}` : "";
  const sideList = groupedDump ? [groupedDump].map((group, groupIndex) => {
    const executions = group.executions.map((execution, indexOfExecution) => {
      const { tasks } = execution;
      const taskList = tasks.map((task, index) => {
        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          SideItem,
          {
            task,
            selected: task === activeTask,
            onClick: () => {
              setActiveTask(task);
            },
            onItemHover: (hoverTask, x, y) => {
              if (hoverTask && x && y) {
                setHoverPreviewConfig({ x, y });
                setHoverTask(hoverTask);
              } else {
                setHoverPreviewConfig(null);
                setHoverTask(null);
              }
            }
          },
          index
        );
      });
      let separator;
      switch (indexOfExecution) {
        case 0:
          separator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-separator side-separator-space-up" });
          break;
        default:
          separator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-separator side-separator-space-up side-separator-space-down" });
          break;
      }
      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
        separator,
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "side-sub-title", children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "name-status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MessageOutlined, {}) }),
          execution.name
        ] }),
        taskList
      ] }, indexOfExecution);
    });
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_panel_title.default, { title: group.groupName, subTitle: envInfo }),
      executions
    ] }, groupIndex);
  }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "no tasks" });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "side-bar", children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "top-controls", children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-list", children: sideList }),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-separator side-separator-line side-separator-space-up" }),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-meta-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-meta", children: "switch: Command + Up / Down" }) })
    ] }),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-controls" })
  ] });
};
var sidebar_default = Sidebar;
