"use client";
var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
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;
};
import Buffer2 from "buffer";
import processBrowser from "process/browser";
import console from "console-browserify";
var buffer = {
  Buffer: Buffer2
};
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { timeStr } from "../utils";
import { RadiusSettingOutlined } from "@ant-design/icons";
import { paramStr, typeStr } from "@midscene/web/ui-utils";
import { Tag, Timeline, Tooltip } from "antd";
import { highlightColorForType } from "./color";
import "./detail-side.css";
import { timeCostStrElement } from "./misc";
import PanelTitle from "./panel-title";
import { useExecutionDump } from "./store";
const noop = () => {
};
const Card = (props) => {
  const {
    highlightWithColor,
    title,
    subtitle,
    onMouseEnter,
    onMouseLeave,
    content,
    characteristic
  } = props;
  const titleTag = props.characteristic ? /* @__PURE__ */ jsx("div", { className: "item-extra", children: /* @__PURE__ */ jsx("div", { className: "title-tag", children: /* @__PURE__ */ jsx(
    Tooltip,
    {
      placement: "bottomRight",
      title: characteristic,
      mouseEnterDelay: 0,
      children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(RadiusSettingOutlined, {}) })
    }
  ) }) }) : null;
  const titleRightPaddingClass = props.characteristic ? "title-right-padding" : "";
  const modeClass = props.liteMode ? "item-lite" : "";
  const highlightStyle = highlightWithColor ? { backgroundColor: highlightWithColor } : {};
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: `item ${modeClass} ${highlightWithColor ? "item-highlight" : ""}`,
      style: __spreadValues({}, highlightStyle),
      onMouseEnter,
      onMouseLeave,
      children: [
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: `title ${titleRightPaddingClass}`,
            style: { display: title ? "block" : "none" },
            children: [
              title,
              titleTag
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: `subtitle ${titleRightPaddingClass}`,
            style: { display: subtitle ? "block" : "none" },
            children: subtitle
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: "description",
            style: { display: content ? "block" : "none" },
            children: content
          }
        )
      ]
    }
  );
};
const MetaKV = (props) => {
  return /* @__PURE__ */ jsx("div", { className: "meta-kv", children: props.data.map((item, index) => {
    return /* @__PURE__ */ jsxs("div", { className: "meta", children: [
      /* @__PURE__ */ jsx("div", { className: "meta-key", children: item.key }),
      /* @__PURE__ */ 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 = useExecutionDump((store) => store.activeTask);
  const dump = 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__ */ jsx("span", { children: /* @__PURE__ */ jsx(Tag, { bordered: false, color: "orange", className: "element-button", children: "Element" }) });
    if (Array.isArray(data) || typeof data !== "object") {
      return /* @__PURE__ */ 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__ */ jsx("span", { children: elementEl(item) }, index));
      } else {
        content = typeof value === "string" ? value : JSON.stringify(value, void 0, 2);
      }
      return /* @__PURE__ */ 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: timeStr((_d = task == null ? void 0 : task.timing) == null ? void 0 : _d.start)
      },
      {
        key: "end",
        content: timeStr((_e = task == null ? void 0 : task.timing) == null ? void 0 : _e.end)
      },
      {
        key: "time cost",
        content: 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 && typeStr(task) || "" },
          {
            key: "whatHaveDone",
            content: planningTask.param.whatHaveDone
          },
          {
            key: "whatToDoNext",
            content: planningTask.param.userPrompt
          }
        ]
      });
    } else {
      taskParam = MetaKV({
        data: [
          { key: "type", content: task && typeStr(task) || "" },
          {
            key: "userPrompt",
            content: paramStr(task) || ""
          }
        ]
      });
    }
  } else if ((task == null ? void 0 : task.type) === "Insight") {
    taskParam = MetaKV({
      data: [
        { key: "type", content: task && typeStr(task) || "" },
        ...paramStr(task) ? [
          {
            key: "param",
            content: 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 && typeStr(task) || "" },
        {
          key: "value",
          content: paramStr(task) || ""
        }
      ]
    });
  }
  const matchedElementsEl = (elements == null ? void 0 : elements.length) ? elements.map((element, idx) => {
    const ifHighlight = false;
    const highlightColor = ifHighlight ? highlightColorForType("element") : void 0;
    const elementKV = kv(
      objectWithoutKeys(element, [
        "content",
        "rect",
        "center",
        "left",
        "top",
        "right",
        "bottom",
        "locator"
      ])
    );
    return /* @__PURE__ */ jsx(
      Card,
      {
        title: element.content,
        highlightWithColor: highlightColor,
        subtitle: "",
        content: elementKV
      },
      idx
    );
  }) : null;
  const errorSection = (task == null ? void 0 : task.error) ? /* @__PURE__ */ jsx(
    Card,
    {
      liteMode: true,
      title: "Error",
      onMouseEnter: noop,
      onMouseLeave: noop,
      content: /* @__PURE__ */ jsx("pre", { className: "description-content", style: { color: "#F00" }, children: task.error })
    }
  ) : null;
  const dataCard = (dump == null ? void 0 : dump.data) ? /* @__PURE__ */ jsx(
    Card,
    {
      liteMode: true,
      onMouseEnter: noop,
      onMouseLeave: noop,
      content: /* @__PURE__ */ 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__ */ jsx(
      Card,
      {
        liteMode: true,
        title: "Assert",
        onMouseEnter: noop,
        onMouseLeave: noop,
        content: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("b", { children: typeStr(item) }) }),
            /* @__PURE__ */ jsx("p", { children: item.thought }),
            /* @__PURE__ */ jsx("p", { children: paramStr2 }),
            /* @__PURE__ */ jsx("p", { children: locateStr })
          ] })
        };
      })
    );
    if ((_j = task.output) == null ? void 0 : _j.furtherPlan) {
      timelineData.push({
        color: "#06B1AB",
        children: /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("b", { children: "Further Plan" }) }),
          /* @__PURE__ */ jsx("p", { children: (_l = (_k = task.output) == null ? void 0 : _k.furtherPlan) == null ? void 0 : _l.whatToDoNext })
        ] })
      });
    }
  }
  return /* @__PURE__ */ jsxs("div", { className: "detail-side", children: [
    /* @__PURE__ */ jsx(PanelTitle, { title: "Task Meta" }),
    metaKVElement,
    /* @__PURE__ */ jsx(PanelTitle, { title: "Param" }),
    taskParam,
    /* @__PURE__ */ jsx(PanelTitle, { title: "Output" }),
    /* @__PURE__ */ jsxs("div", { className: "item-list item-list-space-up", children: [
      errorSection,
      dataCard,
      assertionCard,
      matchedElementsEl,
      /* @__PURE__ */ jsx(Timeline, { items: timelineData })
    ] })
  ] });
};
var detail_side_default = DetailSide;
export {
  detail_side_default as default
};
