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 { Button, Input, Modal, Tooltip } from "antd";
import { useState } from "react";
import { iconForStatus } from "./misc";
import { useEnvConfig } from "./store";
function EnvConfig() {
  const { config, configString, loadConfig } = useEnvConfig();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [tempConfigString, setTempConfigString] = useState(configString);
  const showModal = (e) => {
    setIsModalOpen(true);
    e.preventDefault();
  };
  const handleOk = () => {
    setIsModalOpen(false);
    loadConfig(tempConfigString);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const editBtn = /* @__PURE__ */ jsx(Button, { type: "link", size: "small", onClick: showModal, children: "Edit" });
  const [showEditButton, setShowEditButton] = useState(false);
  const configTip = Object.keys(config).length === 0 ? /* @__PURE__ */ jsxs("div", { children: [
    iconForStatus("failed"),
    " No config",
    /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(
      Tooltip,
      {
        title: "Please set up your environment variables to use Midscene.",
        placement: "right",
        open: !isModalOpen,
        children: /* @__PURE__ */ jsx(Button, { type: "primary", onClick: showModal, children: "Click to set up" })
      }
    ) })
  ] }) : /* @__PURE__ */ jsx(
    "div",
    {
      onMouseEnter: () => setShowEditButton(true),
      onMouseLeave: () => setShowEditButton(false),
      children: Object.entries(config).map(([key, value]) => /* @__PURE__ */ jsx("div", { style: { lineHeight: "1.8" }, children: /* @__PURE__ */ jsxs("span", { children: [
        iconForStatus("success"),
        " ",
        key,
        ":",
        " ",
        key === "MIDSCENE_MODEL_NAME" ? value : "***",
        " ",
        showEditButton && editBtn
      ] }) }, key))
    }
  );
  return /* @__PURE__ */ jsxs("div", { children: [
    configTip,
    /* @__PURE__ */ jsxs(
      Modal,
      {
        title: "Env Config",
        open: isModalOpen,
        onOk: handleOk,
        onCancel: handleCancel,
        okText: "Save",
        style: { width: "800px" },
        children: [
          /* @__PURE__ */ jsx(
            Input.TextArea,
            {
              rows: 7,
              placeholder: "OPENAI_API_KEY=sk-...\nMIDSCENE_MODEL_NAME=gpt-4o-2024-08-06\n...",
              value: tempConfigString,
              onChange: (e) => setTempConfigString(e.target.value),
              style: { whiteSpace: "nowrap", wordWrap: "break-word" }
            }
          ),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx("p", { children: "The format is KEY=VALUE and separated by new lines." }),
            /* @__PURE__ */ jsxs("p", { children: [
              "These data will be saved ",
              /* @__PURE__ */ jsx("strong", { children: "locally in your browser" }),
              "."
            ] })
          ] })
        ]
      }
    )
  ] });
}
export {
  EnvConfig
};
