import React from 'react';
import classNames from 'classnames';
import { Skeleton, SKELETON_TYPES } from '../skeleton';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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%
}
export 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__*/_jsx("li", {
      className: "branch-item",
      "test-id": "file-tree-skeleton-item",
      children: /*#__PURE__*/_jsx("div", {
        className: "item",
        style: {
          paddingLeft: `${level * 20}px`
        },
        children: /*#__PURE__*/_jsx("div", {
          className: "file-tree-item-content",
          children: /*#__PURE__*/_jsxs("div", {
            className: "item-label",
            children: [/*#__PURE__*/_jsx("div", {
              className: "item-icon",
              children: /*#__PURE__*/_jsx(Skeleton, {
                type: SKELETON_TYPES.CIRCULAR,
                width: 16,
                height: 16,
                testId: `file-tree-skeleton-${level}-${index}-icon`
              })
            }), /*#__PURE__*/_jsx(Skeleton, {
              type: SKELETON_TYPES.TEXT,
              width: width,
              height: 16,
              testId: `file-tree-skeleton-${level}-${index}`
            })]
          })
        })
      })
    }, `skeleton-${level}-${index}`);
  };
  return /*#__PURE__*/_jsx("div", {
    className: classNames('file-tree-root', rootClass),
    "test-id": rootTestId,
    children: /*#__PURE__*/_jsx("ul", {
      className: "branch",
      "test-id": `${branchTestId}-skeleton`,
      children: loadingPattern.map((level, index) => {
        return renderSkeletonItem(level, index);
      })
    })
  });
}