import { useState as e, useMemo as a } from "react";
import { k as n, aa as l, B as t, I as i, d as o } from "./antd-960523cf.js";
import { A as r } from "./react-d37f274e.js";
import { j as p, a as d, h as s } from "./common-64096f9e.js";
import { u as c } from "./styled-components-f8105b39.js";
import { u as m } from "./comps-f4e34e6a.js";
import { _ as h } from "./constants-6ebafe5b.js";
import { t as f } from "./i18n-1c9e1aab.js";
const x = c.div`
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: 100%;

  .help {
    font-size: 12px;
    color: #b8b9bf;
  }

  .panel {
    display: flex;
    flex-direction: column;

    .panel-title {
      font-size: 12px;
      padding: 4px 8px;
      border-bottom: 1px solid #efefef;
    }

    .panel-content {
      flex: 1;
      overflow: auto;
    }
  }

  .data-panel {
    width: 312px;
    border-right: 1px solid #efefef;

    .panel-content {
      padding: 8px;
    }
  }

  .property-panel {
    height: 100%;
    width: 312px;
    border-left: 1px solid #efefef;
    box-sizing: border-box;
  }

  .preview-panel {
    flex: 1;
    display: flex;

    .preview-content {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f5f5f6;
    }
  }

  .bottom-panel {
    position: relative;
    height: 280px;
    border-top: 1px solid #efefef;

    .panel-content {
      padding: 16px;
    }

    .ant-form-item {
      margin-bottom: 16px;
    }

    .ant-form-item-label {
      & > label {
        font-size: 12px;
        height: 28px;
        width: 120px;
        text-align: right;
      }
    }

    .ant-form-item-control-input {
      min-height: 28px;
    }

    .ant-form-item-explain {
      font-size: 12px;
    }
  }

  .main {
    display: flex;
    flex-direction: row;
    flex: 1;
    background-color: #fff;
    overflow: hidden;
  }
`, g = c(i.TextArea)`
  width: 50%;
`;
function y(i2) {
  var _a;
  const { compFactory: o2, layoutInfo: c2, initialValue: y2 } = i2, [u2, v2] = e([]), b2 = a(() => ({ Comp: o2, initialValue: y2 ?? {} }), [o2, y2]), [w2] = m(b2);
  if (!w2)
    return null;
  const N2 = Object.keys(((_a = w2.exposingInfo) == null ? void 0 : _a.call(w2).methods) || {});
  return p(x, { children: d("div", { className: "main", children: [d("div", { className: "panel data-panel", children: [p("div", { className: "panel-title", children: f("playground.data") }), p("div", { className: "panel-content", children: p(r, { collapsed: 2, enableClipboard: false, src: w2.exposingValues, name: false, displayDataTypes: false, indentWidth: 2, iconStyle: "square" }) })] }), d("div", { className: "panel preview-panel", children: [p("div", { className: "panel-title", children: f("playground.preview") }), p("div", { className: "preview-content", id: h, style: { overflow: "auto", contain: "paint" }, children: p("div", { style: { width: 48 * c2.w, height: 7 * c2.h }, children: w2.getView() }) }), d("div", { className: "panel bottom-panel", children: [p("div", { className: "panel-title", children: f("playground.console") }), p("div", { className: "panel-content", children: d(n, { component: false, layout: "horizontal", children: [p(n.Item, { label: f("playground.executeMethods"), children: d(l, { wrap: true, children: [0 === N2.length && p("div", { className: "help", children: f("playground.noMethods") }), N2.map((e2) => p(t, { ghost: true, type: "primary", onClick: () => {
    w2.dispatch(s({ type: "execute", methodName: e2, params: u2 }, false));
  }, children: e2 }, e2))] }) }), N2.length > 0 && p(n.Item, { label: f("playground.methodParams"), help: f("playground.methodParamsHelp"), children: p(g, { rows: 4, onChange: (e2) => ((e3) => {
    try {
      const a2 = JSON.parse(e3.target.value);
      if (Array.isArray(a2))
        return void v2(a2);
      v2([a2]);
    } catch {
      v2([e3.target.value]);
    }
  })(e2) }) })] }) })] })] }), d("div", { className: "panel property-panel", children: [p("div", { className: "panel-title", children: f("playground.property") }), p("div", { className: "panel-content", children: w2.getPropertyView() })] })] }) });
}
const u = c.div`
  display: flex;
  flex-direction: column;
`, v = c.div`
  height: 48px;
  border-bottom: 1px solid #e1e3eb;
  padding-left: 24px;
  .pkg-name {
    line-height: 48px;
  }
  .name {
    font-size: 14px;
    font-weight: bold;
  }
  .version {
    margin-left: 4px;
    font-size: 12px;
    color: #333;
  }
`, b = c.div`
  display: flex;
  flex-direction: row;
`, w = c.div`
  width: 200px;
  background-color: #fff;
  border-right: 1px solid #e1e3eb;
  overflow: auto;
  height: calc(100vh - 48px);
  .ant-menu {
    border-right: 0;
  }
`, N = c.div`
  flex: 1;
  height: calc(100vh - 48px);
`;
function k(a2) {
  var _a;
  const { compMap: n2, compMeta: l2, packageName: t2, packageVersion: i2 } = a2, [r2, s2] = e(Object.keys(l2)[0]), c2 = ((_a = l2[r2]) == null ? void 0 : _a.layoutInfo) || { w: 5, h: 5 }, m2 = Object.keys(l2).map((e2) => ({ key: e2, label: e2 }));
  return d(u, { children: [p(v, { children: d("div", { className: "pkg-name", children: [p("span", { className: "name", children: t2 }), d("span", { className: "version", children: [" - Version: ", i2] })] }) }), d(b, { children: [p(w, { children: p(o, { onSelect: (e2) => s2(e2.selectedKeys[0]), selectedKeys: [r2], items: m2, mode: "inline" }) }), p(N, { children: p(y, { compFactory: n2[r2], layoutInfo: c2 }) })] })] });
}
export {
  k as C,
  y as a
};
