import React from "react";
import { jsx as ___EmotionJSX } from "@emotion/react";
const INDENT_PX = 40;
const MAX_STACK_COUNT = 10;
const MAX_CHARACTERS = 200;
const MAX_CHARACTERS_REVEAL_FIRST_N = 100;
const MAX_CHARACTERS_REVEAL_LAST_N = 100;
const existingKeys = [];
function incrementTillNew(key, suffix) {
  const keyWithSuffix = "".concat(key ? "default" : key, "-").concat(suffix.toString());
  if (!existingKeys.includes(keyWithSuffix)) {
    existingKeys.push(keyWithSuffix);
    return keyWithSuffix;
  } else {
    return incrementTillNew(key, suffix + 1);
  }
}
function JsonLine(key, val) {
  const keyToUse = incrementTillNew(key, 1);
  return ___EmotionJSX("div", {
    key: keyToUse
  }, ___EmotionJSX("span", {
    style: {
      color: "black",
      fontWeight: 700
    }
  }, key, ": "), ___EmotionJSX("span", {
    style: {
      color: "#057A55"
    }
  }, val));
}
function formatJson(variable) {
  let stackCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  let indent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  let key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
  if (stackCount > MAX_STACK_COUNT) {
    /* nested 5 levels. stop showing */
    return "...";
  }
  const keyToUse = incrementTillNew(String(variable), 1);
  if (typeof variable === "object" && variable !== null && !Array.isArray(variable)) {
    const jsonLines = [];
    for (const key of Object.keys(variable)) {
      if (Array.isArray(variable[key])) {
        /* Array items will be rendered differently, and alongside sibling attributes.
        KEY_TO_ARRAY_ITEM[0]: ...
        KEY_TO_ARRAY_ITEM[1]: ...
        SIBLING_ATTRIBUTE: ...
         indent = 0 to keep alignment with sibling attributes
        */
        jsonLines.push(formatJson(variable[key], stackCount + 1, 0, key));
      } else {
        /* if attribute is a nested object, display the key and indent.
        
        KEY_TO_NESTED_OBJ:
            ATTRIBUTE1: ...
            ATTRIBUTE2: ...
        */
        jsonLines.push(JsonLine(key, formatJson(variable[key], stackCount + 1, INDENT_PX)));
      }
    }
    return ___EmotionJSX("div", {
      key: keyToUse,
      style: {
        marginLeft: "".concat(indent, "px")
      }
    }, jsonLines); // wrapping in div basically starts a new line
  }
  if (Array.isArray(variable)) {
    return ___EmotionJSX("div", {
      key: keyToUse,
      style: {
        marginLeft: "".concat(indent, "px")
      }
    }, variable.map((element, index) => JsonLine("".concat(key, "[").concat(index, "]"), formatJson(element, stackCount + 1, INDENT_PX)))) // wrapping in div basically starts a new line
    ;
  }
  if (typeof variable === "string" && variable.length >= MAX_CHARACTERS) {
    return variable.substring(0, MAX_CHARACTERS_REVEAL_FIRST_N) + "[...]" + variable.substring(variable.length - MAX_CHARACTERS_REVEAL_LAST_N);
  }
  return String(variable);
}
export const JsonView = props => {
  return ___EmotionJSX("pre", {
    "data-testid": "json-view",
    style: {
      backgroundColor: "white",
      fontSize: "14px",
      lineHeight: "21px",
      whiteSpace: "pre-wrap",
      wordWrap: "break-word"
    }
  }, formatJson(props.src));
};
//# sourceMappingURL=JsonView.js.map