"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _DocsViewerModule = _interopRequireDefault(require("./DocsViewer.module.css"));

var _decoratorSomething = _interopRequireDefault(require("./decoratorSomething"));

var _sandpackReact = require("@codesandbox/sandpack-react");

var _reactCodeBlocks = require("react-code-blocks");

var _reactLive = require("react-live");

var _server = require("react-dom/server");

var _reactElementToJsxString = _interopRequireDefault(require("react-element-to-jsx-string"));

var _replaceAtLast = _interopRequireDefault(require("../../utils/replaceAtLast"));

var _replaceAtFirst = _interopRequireDefault(require("../../utils/replaceAtFirst"));

var _excluded = ["$decorator", "$decoratorClassName", "children"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var stringConstructor = "".constructor;
var arrayConstructor = [].constructor;
var objectConstructor = {}.constructor;
var propTypesList = {
  string: "string",
  "boolean": "bool",
  object: "object",
  number: "number",
  array: "array",
  any: "any",
  node: "node",
  func: "func"
};

function whatIsIt(object) {
  var defaultType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : propTypesList.any;

  if (object === null) {
    return "null";
  }

  if (object === undefined) {
    return "undefined";
  }

  if ( /*#__PURE__*/_react["default"].isValidElement(object)) {
    return propTypesList.node;
  }

  if (object.constructor === arrayConstructor) {
    return propTypesList.array;
  }

  if (object.constructor === objectConstructor) {
    return propTypesList.object;
  }

  if (typeof object === "function") {
    return propTypesList.func;
  }

  return defaultType;
}

var getConvertedPropValue = function getConvertedPropValue(propType, propertyValue) {
  var displayPropValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
  var propertyName = arguments.length > 3 ? arguments[3] : undefined;
  var propertyType = whatIsIt(propertyValue, propType);

  switch (propertyType) {
    case propTypesList.string:
      displayPropValue = "\"".concat(propertyValue, "\"");
      break;

    case propTypesList.object:
    case propTypesList.array:
      displayPropValue = "".concat(JSON.stringify(propertyValue));
      break;

    case propTypesList.node:
    case propTypesList.any:
      var componentName = upperCaseFirstLetter(propertyName);
      displayPropValue = "\"<".concat(componentName, "PlaceHolder />\"");
      break;

    case propTypesList.func:
      displayPropValue = "\"".concat(propertyValue.name, "Function()\"");

    default:
      displayPropValue = displayPropValue || "".concat(propertyValue);
  }

  return displayPropValue;
};

var getDisplayValue = function getDisplayValue() {
  var propertyType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
  var propertyValue = arguments.length > 1 ? arguments[1] : undefined;
  var displayPropValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
  var propertyName = arguments.length > 3 ? arguments[3] : undefined;

  if (propertyType.startsWith("union")) {
    var propTypes = propertyType.replace("union[", "").replace("]").split(",");
    propTypes.forEach(function (propType) {
      displayPropValue = getConvertedPropValue(propType, propertyValue, displayPropValue, propertyName);
    });
  } else if (propertyType.startsWith("enum")) {
    displayPropValue = "\"".concat(propertyValue, "\"");
  }

  return getConvertedPropValue(propertyType, propertyValue, displayPropValue, propertyName);
};

var invertObject = function invertObject() {
  var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return Object.fromEntries(Object.entries(obj).map(function (a) {
    return a.reverse();
  }));
};

function upperCaseFirstLetter(content) {
  return content.charAt(0).toUpperCase() + content.slice(1);
}

function CodeIcon() {
  return /*#__PURE__*/_react["default"].createElement("svg", {
    viewBox: "0 0 122.88 91.26"
  }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
    style: "fill-rule:evenodd;clip-rule:evenodd;",
    d: "M8.32,0h106.24c4.58,0,8.32,3.74,8.32,8.32v74.62c0,4.57-3.74,8.32-8.32,8.32H8.32C3.74,91.26,0,87.51,0,82.94 V8.32C0,3.74,3.74,0,8.32,0L8.32,0z M54.46,72.22L32,58.61v-8.63l22.46-13.61v10.26l-13.65,7.69l13.65,7.7V72.22L54.46,72.22z M68.42,72.22l22.46-13.61v-8.63L68.42,36.37v10.26l13.65,7.69l-13.65,7.7V72.22L68.42,72.22z M117.97,23.29H5.29v60.46 c0,0.64,0.25,1.2,0.67,1.63c0.42,0.42,0.99,0.67,1.63,0.67h108.04c0.64,0,1.2-0.25,1.63-0.67c0.43-0.43,0.67-0.99,0.67-1.63V23.29 H117.97L117.97,23.29z M106.64,9.35c2.27,0,4.11,1.84,4.11,4.11c0,2.27-1.84,4.11-4.11,4.11c-2.27,0-4.11-1.84-4.11-4.11 C102.54,11.19,104.38,9.35,106.64,9.35L106.64,9.35z M78.8,9.35c2.27,0,4.11,1.84,4.11,4.11c0,2.27-1.84,4.11-4.11,4.11 c-2.27,0-4.11-1.84-4.11-4.11C74.69,11.19,76.53,9.35,78.8,9.35L78.8,9.35z M92.72,9.35c2.27,0,4.11,1.84,4.11,4.11 c0,2.27-1.84,4.11-4.11,4.11c-2.27,0-4.11-1.84-4.11-4.11C88.61,11.19,90.45,9.35,92.72,9.35L92.72,9.35z"
  })));
}

var excludeProperties = ["children"];

var generateCodeString = function generateCodeString(component, properties, displayChildren) {
  var componentName = component.name;
  var componentLC = componentName.toLowerCase();
  var componentPropTypes = component.propTypes || {};
  var componentEnumTypes = component.constantProps || {};
  var propsIntoString = "";
  Object.entries(properties).forEach(function (property) {
    var _componentPropTypes$p;

    var propertyName = property[0];
    var propertyValue = property[1];

    if (excludeProperties.includes(propertyName)) {
      return;
    }

    var propertyType = (_componentPropTypes$p = componentPropTypes[propertyName]) === null || _componentPropTypes$p === void 0 ? void 0 : _componentPropTypes$p.hookType;

    if (componentEnumTypes && componentEnumTypes[propertyName]) {
      var propertyKeyName = invertObject(componentEnumTypes[propertyName])[propertyValue];
      propertyValue = "".concat(componentLC, "ConstantProps.").concat(propertyName, ".").concat(propertyKeyName);
      propertyType = "";
    }

    var displayPropValue = "";
    displayPropValue = getDisplayValue(propertyType, propertyValue, displayPropValue, propertyName);
    propsIntoString += " ".concat(propertyName, "={").concat(displayPropValue, "}");
  });
  var componentCode = "\t<".concat(componentName).concat(propsIntoString, " />");

  if (displayChildren) {
    var displayChildrenCode = (0, _reactElementToJsxString["default"])(displayChildren, {
      useBooleanShorthandSyntax: false,
      useFragmentShortSyntax: false,
      showDefaultProps: false,
      tabStop: 12
    });
    displayChildrenCode = (0, _replaceAtFirst["default"])(displayChildrenCode, "<React.Fragment>", "");
    displayChildrenCode = (0, _replaceAtLast["default"])(displayChildrenCode, "</React.Fragment>", ""); //displayChildrenCode = replaceAtLast(displayChildrenCode,"<React.Fragment />","");

    componentCode = "\t<".concat(componentName).concat(propsIntoString, " >").concat(displayChildrenCode, "\t</").concat(componentName, ">");
  }

  var componentImportCode = "\nimport ".concat(componentName, " from \"@zohodesk/basecomponents/lib/components/").concat(componentLC, "/").concat(componentName, "\";\nimport ").concat(componentLC, "ConstantProps from \"@zohodesk/basecomponents/lib/components/").concat(componentLC, "/").concat(componentName, ".constantProps\";\n    ");
  return {
    componentImportCode: componentImportCode,
    componentCode: componentCode,
    componentType: component
  };
};

function CodePlayer(_ref) {
  var _ref$initialCodes = _ref.initialCodes,
      initialCodes = _ref$initialCodes === void 0 ? [] : _ref$initialCodes,
      isShowFullSource = _ref.isShowFullSource;
  var importCode = "import React from 'react';\nimport ThemeProvider from \"@zohodesk/basecomponents/lib/components/themeprovider/ThemeProvider\";";
  var initialCode = "";
  var componentImportCode = "";
  initialCodes.map(function (codeItem) {
    if (!componentImportCode) {
      componentImportCode = "".concat(codeItem.componentImportCode, " \n");
    }

    if (!isShowFullSource) {
      initialCode += "".concat(codeItem.componentCode, " \n");
    } else {
      initialCode += "".concat(codeItem.componentCode, " \n\n");
    }
  });
  var fullSourceCode = "".concat(importCode);
  fullSourceCode += "".concat(componentImportCode);
  fullSourceCode += "export default function App() {\n        return <ThemeProvider> \n\n ".concat(initialCode, " </ThemeProvider>\n    }");

  if (!isShowFullSource) {
    fullSourceCode = "\n".concat(initialCode);
  }

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: _DocsViewerModule["default"].code_player
  }, /*#__PURE__*/_react["default"].createElement(_reactCodeBlocks.CopyBlock, {
    text: fullSourceCode,
    language: "jsx",
    showLineNumbers: false,
    wrapLongLines: true,
    theme: _reactCodeBlocks.dracula,
    codeBlock: true
  }));
}

var _default = function _default(props) {
  var commonDecoratorItemClassName = props.$decoratorItemClassName,
      decorateList = props.$decorator,
      decoratorListClassName = props.$decoratorListClassName,
      decorateCommonComponentItem = props.$decorateComponentItem;
  var initialCodes = [];
  var componentsList = props.componentsList && props.componentsList.map(function (itemId, index) {
    var componentDetail = props.componentsDetail && props.componentsDetail[itemId];

    if (!componentDetail) {
      return null;
    }

    var ComponentType = props.componentType;

    var decoratorItem = componentDetail.$decorator,
        decoratorClassName = componentDetail.$decoratorClassName,
        children = componentDetail.children,
        originalComponentDetail = _objectWithoutProperties(componentDetail, _excluded);

    var displayChildren = children;

    if (whatIsIt(children) === propTypesList.func) {
      displayChildren = children();

      if (whatIsIt(displayChildren) === propTypesList.array) {
        displayChildren = displayChildren.map(function (item, i) {
          return /*#__PURE__*/_react["default"].cloneElement(item, {
            key: i
          });
        });
      }
    } // else if (whatIsIt(children) === propTypesList.array) {
    //   displayChildren = children.map((item,i)=>{
    //     return React.cloneElement(item,{key:i}); 
    //   });
    // }
    // else if(whatIsIt(children) === propTypesList.array){
    //   displayChildren = [...children].map((a)=>a);
    // }


    var displayComponent = ComponentType ? /*#__PURE__*/_react["default"].createElement(ComponentType, originalComponentDetail, displayChildren) : null;
    initialCodes.push(generateCodeString(ComponentType, originalComponentDetail, displayChildren ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, displayChildren) : null));
    var componentDecorator = (0, _decoratorSomething["default"])(decoratorItem, displayComponent);
    var decoratedComponentItem = (0, _decoratorSomething["default"])(decorateCommonComponentItem, componentDecorator);
    var itemClassName = "".concat(_DocsViewerModule["default"].tabs_component__item, " ").concat(commonDecoratorItemClassName, " ").concat(decoratorClassName);
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: index,
      className: itemClassName
    }, decoratedComponentItem);
  });
  var listClassName = decoratorListClassName || "";
  var itemListClassName = "".concat(_DocsViewerModule["default"].tabs_components_list, " ").concat(listClassName);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: _DocsViewerModule["default"].tabs_components_list_view
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: itemListClassName
  }, props.locator, (0, _decoratorSomething["default"])(decorateList, componentsList)), props.disableSourceCode ? null : /*#__PURE__*/_react["default"].createElement(CodePlayer, {
    initialCodes: initialCodes,
    isShowFullSource: props.isShowFullSource
  }));
};

exports["default"] = _default;