"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
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 detail_side_exports = {};
__export(detail_side_exports, {
  default: () => detail_side_default
});
module.exports = __toCommonJS(detail_side_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_utils = require("../utils");
var import_icons = require("@ant-design/icons");
var import_ui_utils = require("@midscene/web/ui-utils");
var import_antd = require("antd");
var import_color = require("./color");
var import_detail_side = require("./detail-side.css");
var import_misc = require("./misc");
var import_panel_title = __toESM(require("./panel-title"));
var import_store = require("./store");
const noop = () => {
};
const Card = (props) => {
  const {
    highlightWithColor,
    title,
    subtitle,
    onMouseEnter,
    onMouseLeave,
    content,
    characteristic
  } = props;
  const titleTag = props.characteristic ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "item-extra", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title-tag", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_antd.Tooltip,
    {
      placement: "bottomRight",
      title: characteristic,
      mouseEnterDelay: 0,
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RadiusSettingOutlined, {}) })
    }
  ) }) }) : null;
  const titleRightPaddingClass = props.characteristic ? "title-right-padding" : "";
  const modeClass = props.liteMode ? "item-lite" : "";
  const highlightStyle = highlightWithColor ? { backgroundColor: highlightWithColor } : {};
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "div",
    {
      className: `item ${modeClass} ${highlightWithColor ? "item-highlight" : ""}`,
      style: __spreadValues({}, highlightStyle),
      onMouseEnter,
      onMouseLeave,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
          "div",
          {
            className: `title ${titleRightPaddingClass}`,
            style: { display: title ? "block" : "none" },
            children: [
              title,
              titleTag
            ]
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          "div",
          {
            className: `subtitle ${titleRightPaddingClass}`,
            style: { display: subtitle ? "block" : "none" },
            children: subtitle
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          "div",
          {
            className: "description",
            style: { display: content ? "block" : "none" },
            children: content
          }
        )
      ]
    }
  );
};
const MetaKV = (props) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "meta-kv", children: props.data.map((item, index) => {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "meta", children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "meta-key", children: item.key }),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "meta-value", children: item.content })
    ] }, index);
  }) });
};
const objectWithoutKeys = (obj, keys) => Object.keys(obj).reduce((acc, key) => {
  if (!keys.includes(key)) {
    acc[key] = obj[key];
  }
  return acc;
}, {});
const DetailSide = () => {
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
  const task = (0, import_store.useExecutionDump)((store) => store.activeTask);
  const dump = (0, import_store.useExecutionDump)((store) => store.insightDump);
  const { matchedSection: sections, matchedElement: elements } = dump || {};
  const kv = (data) => {
    const isElementItem = (value) => Boolean(value) && typeof value === "object" && typeof value.content !== "undefined" && Boolean(value.center) && Boolean(value.rect);
    const elementEl = (value) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tag, { bordered: false, color: "orange", className: "element-button", children: "Element" }) });
    if (Array.isArray(data) || typeof data !== "object") {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "description-content", children: JSON.stringify(data, void 0, 2) });
    }
    return Object.keys(data).map((key) => {
      const value = data[key];
      let content;
      if (typeof value === "object" && isElementItem(value)) {
        content = elementEl(value);
      } else if (Array.isArray(value) && value.some((item) => isElementItem(item))) {
        content = value.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: elementEl(item) }, index));
      } else {
        content = typeof value === "string" ? value : JSON.stringify(value, void 0, 2);
      }
      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("pre", { className: "description-content", children: [
        key,
        " ",
        content
      ] }, key);
    });
  };
  const usageInfo = ((_c = (_b = (_a = task == null ? void 0 : task.log) == null ? void 0 : _a.dump) == null ? void 0 : _b.taskInfo) == null ? void 0 : _c.usage) ? JSON.stringify(
    task.log.dump.taskInfo.usage,
    void 0,
    2
  ) : "";
  const metaKVElement = MetaKV({
    data: [
      {
        key: "status",
        content: (task == null ? void 0 : task.status) || ""
      },
      {
        key: "start",
        content: (0, import_utils.timeStr)((_d = task == null ? void 0 : task.timing) == null ? void 0 : _d.start)
      },
      {
        key: "end",
        content: (0, import_utils.timeStr)((_e = task == null ? void 0 : task.timing) == null ? void 0 : _e.end)
      },
      {
        key: "time cost",
        content: (0, import_misc.timeCostStrElement)((_f = task == null ? void 0 : task.timing) == null ? void 0 : _f.cost)
      },
      {
        key: "cache",
        content: (task == null ? void 0 : task.cache) ? JSON.stringify(task == null ? void 0 : task.cache) : "false"
      },
      ...(task == null ? void 0 : task.locate) ? [
        {
          key: "locate",
          content: JSON.stringify(task.locate)
        }
      ] : [],
      ...usageInfo ? [{ key: "usage", content: usageInfo }] : []
    ]
  });
  let taskParam = null;
  if ((task == null ? void 0 : task.type) === "Planning") {
    const planningTask = task;
    if ((_g = planningTask.param) == null ? void 0 : _g.whatHaveDone) {
      taskParam = MetaKV({
        data: [
          { key: "type", content: task && (0, import_ui_utils.typeStr)(task) || "" },
          {
            key: "whatHaveDone",
            content: planningTask.param.whatHaveDone
          },
          {
            key: "whatToDoNext",
            content: planningTask.param.userPrompt
          }
        ]
      });
    } else {
      taskParam = MetaKV({
        data: [
          { key: "type", content: task && (0, import_ui_utils.typeStr)(task) || "" },
          {
            key: "userPrompt",
            content: (0, import_ui_utils.paramStr)(task) || ""
          }
        ]
      });
    }
  } else if ((task == null ? void 0 : task.type) === "Insight") {
    taskParam = MetaKV({
      data: [
        { key: "type", content: task && (0, import_ui_utils.typeStr)(task) || "" },
        ...(0, import_ui_utils.paramStr)(task) ? [
          {
            key: "param",
            content: (0, import_ui_utils.paramStr)(task) || ""
          }
        ] : [],
        ...((_h = task == null ? void 0 : task.param) == null ? void 0 : _h.id) ? [
          {
            key: "id",
            content: task.param.id
          }
        ] : [],
        ...(task == null ? void 0 : task.thought) ? [
          {
            key: "thought",
            content: task.thought
          }
        ] : []
      ]
    });
  } else if ((task == null ? void 0 : task.type) === "Action") {
    taskParam = MetaKV({
      data: [
        { key: "type", content: task && (0, import_ui_utils.typeStr)(task) || "" },
        {
          key: "value",
          content: (0, import_ui_utils.paramStr)(task) || ""
        }
      ]
    });
  }
  const matchedElementsEl = (elements == null ? void 0 : elements.length) ? elements.map((element, idx) => {
    const ifHighlight = false;
    const highlightColor = ifHighlight ? (0, import_color.highlightColorForType)("element") : void 0;
    const elementKV = kv(
      objectWithoutKeys(element, [
        "content",
        "rect",
        "center",
        "left",
        "top",
        "right",
        "bottom",
        "locator"
      ])
    );
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      Card,
      {
        title: element.content,
        highlightWithColor: highlightColor,
        subtitle: "",
        content: elementKV
      },
      idx
    );
  }) : null;
  const errorSection = (task == null ? void 0 : task.error) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    Card,
    {
      liteMode: true,
      title: "Error",
      onMouseEnter: noop,
      onMouseLeave: noop,
      content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "description-content", style: { color: "#F00" }, children: task.error })
    }
  ) : null;
  const dataCard = (dump == null ? void 0 : dump.data) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    Card,
    {
      liteMode: true,
      onMouseEnter: noop,
      onMouseLeave: noop,
      content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: JSON.stringify(dump.data, void 0, 2) })
    }
  ) : null;
  let assertionCard = null;
  if ((task == null ? void 0 : task.type) === "Insight" && task.subType === "Assert") {
    assertionCard = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      Card,
      {
        liteMode: true,
        title: "Assert",
        onMouseEnter: noop,
        onMouseLeave: noop,
        content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "description-content", children: JSON.stringify(
          task.output,
          void 0,
          2
        ) })
      }
    );
  }
  const plans = (_i = task == null ? void 0 : task.output) == null ? void 0 : _i.actions;
  let timelineData = [];
  if (plans) {
    timelineData = timelineData.concat(
      plans.map((item) => {
        const paramToShow = item.param || {};
        const paramStr2 = Object.keys(paramToShow).length ? JSON.stringify(paramToShow, void 0, 2) : null;
        const locateStr = item.type === "Locate" && item.locate ? JSON.stringify(item.locate) : null;
        return {
          color: "#06B1AB",
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: (0, import_ui_utils.typeStr)(item) }) }),
            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: item.thought }),
            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: paramStr2 }),
            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: locateStr })
          ] })
        };
      })
    );
    if ((_j = task.output) == null ? void 0 : _j.furtherPlan) {
      timelineData.push({
        color: "#06B1AB",
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "Further Plan" }) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (_l = (_k = task.output) == null ? void 0 : _k.furtherPlan) == null ? void 0 : _l.whatToDoNext })
        ] })
      });
    }
  }
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "detail-side", children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_panel_title.default, { title: "Task Meta" }),
    metaKVElement,
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_panel_title.default, { title: "Param" }),
    taskParam,
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_panel_title.default, { title: "Output" }),
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "item-list item-list-space-up", children: [
      errorSection,
      dataCard,
      assertionCard,
      matchedElementsEl,
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Timeline, { items: timelineData })
    ] })
  ] });
};
var detail_side_default = DetailSide;
