import Buffer from "buffer";
import processBrowser from "process/browser";
import console from "console-browserify";
var buffer = {
  Buffer
};
import { jsx, jsxs } from "react/jsx-runtime";
import { useAllCurrentTasks, useExecutionDump } from "./store";
import { MessageOutlined, VideoCameraOutlined } from "@ant-design/icons";
import { typeStr } from "@midscene/web/ui-utils";
import { useEffect } from "react";
import { iconForStatus, timeCostStrElement } from "./misc";
import PanelTitle from "./panel-title";
import "./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 = timeCostStrElement(task.timing.cost);
  }
  const statusIcon = task.status === "finished" && task.error ? iconForStatus("finishedWithWarning") : iconForStatus(task.status);
  const titleTextIcon = task.type === "Planning" ? /* @__PURE__ */ jsx("span", { style: { display: "inline-block", marginLeft: "4px" }, children: /* @__PURE__ */ jsx(VideoCameraOutlined, {}) }) : null;
  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "side-item-name", children: [
          /* @__PURE__ */ jsx("span", { className: "status-icon", children: statusIcon }),
          /* @__PURE__ */ jsxs("div", { className: "title", children: [
            typeStr(task),
            " ",
            titleTextIcon
          ] }),
          /* @__PURE__ */ jsx("div", { className: "status-text", children: statusText })
        ] })
      ]
    }
  );
};
const Sidebar = () => {
  const sdkVersion = useExecutionDump((store) => store.sdkVersion);
  const modelName = useExecutionDump((store) => store.modelName);
  const groupedDump = useExecutionDump((store) => store.dump);
  const setActiveTask = useExecutionDump((store) => store.setActiveTask);
  const activeTask = useExecutionDump((store) => store.activeTask);
  const setHoverTask = useExecutionDump((store) => store.setHoverTask);
  const setHoverPreviewConfig = useExecutionDump(
    (store) => store.setHoverPreviewConfig
  );
  const reset = useExecutionDump((store) => store.reset);
  const allTasks = useAllCurrentTasks();
  const currentSelectedIndex = allTasks == null ? void 0 : allTasks.findIndex(
    (task) => task === activeTask
  );
  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__ */ 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__ */ jsx("div", { className: "side-separator side-separator-space-up" });
          break;
        default:
          separator = /* @__PURE__ */ jsx("div", { className: "side-separator side-separator-space-up side-separator-space-down" });
          break;
      }
      return /* @__PURE__ */ jsxs("div", { children: [
        separator,
        /* @__PURE__ */ jsxs("div", { className: "side-sub-title", children: [
          /* @__PURE__ */ jsx("span", { className: "name-status", children: /* @__PURE__ */ jsx(MessageOutlined, {}) }),
          execution.name
        ] }),
        taskList
      ] }, indexOfExecution);
    });
    return /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx(PanelTitle, { title: group.groupName, subTitle: envInfo }),
      executions
    ] }, groupIndex);
  }) : /* @__PURE__ */ jsx("span", { children: "no tasks" });
  return /* @__PURE__ */ jsxs("div", { className: "side-bar", children: [
    /* @__PURE__ */ jsxs("div", { className: "top-controls", children: [
      /* @__PURE__ */ jsx("div", { className: "task-list", children: sideList }),
      /* @__PURE__ */ jsx("div", { className: "side-separator side-separator-line side-separator-space-up" }),
      /* @__PURE__ */ jsx("div", { className: "task-meta-section", children: /* @__PURE__ */ jsx("div", { className: "task-meta", children: "switch: Command + Up / Down" }) })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "bottom-controls" })
  ] });
};
var sidebar_default = Sidebar;
export {
  sidebar_default as default
};
