"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FileTreeLoading = FileTreeLoading;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _skeleton = require("../skeleton");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function getRandomWidth() {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  if (window.IS_SNAPSHOT_ENV) {
    return 70;
  }
  return Math.round(Math.random() * 3 + 5) * 10; // generates random width between 60% and 80%
}
function FileTreeLoading({
  loadingPattern,
  rootClass,
  rootTestId,
  branchTestId
}) {
  const renderSkeletonItem = (level, index) => {
    const width = level === 0 ? '85%' : `${getRandomWidth()}%`; // generates random width between 60% and 80%

    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
      className: "branch-item",
      "test-id": "file-tree-skeleton-item",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "item",
        style: {
          paddingLeft: `${level * 20}px`
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "file-tree-item-content",
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: "item-label",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "item-icon",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
                type: _skeleton.SKELETON_TYPES.CIRCULAR,
                width: 16,
                height: 16,
                testId: `file-tree-skeleton-${level}-${index}-icon`
              })
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
              type: _skeleton.SKELETON_TYPES.TEXT,
              width: width,
              height: 16,
              testId: `file-tree-skeleton-${level}-${index}`
            })]
          })
        })
      })
    }, `skeleton-${level}-${index}`);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: (0, _classnames.default)('file-tree-root', rootClass),
    "test-id": rootTestId,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
      className: "branch",
      "test-id": `${branchTestId}-skeleton`,
      children: loadingPattern.map((level, index) => {
        return renderSkeletonItem(level, index);
      })
    })
  });
}