function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import getCompliedClassName from '../../utils/getCompliedClassName';
import Group from '../group/Group';
import BreadCrumbItem from './BreadCrumbItem';
import style from './BreadCrumbs.module.css';
export default function BreadCrumbsSkeleton(props) {
  let {
    children,
    customId,
    seperator,
    items,
    onSelect,
    active,
    customClassName,
    visited,
    isFrontSeperator,
    size,
    isEllipsis,
    iscollapse,
    onCollapse,
    maxItems,
    direction,
    align,
    ariaLabel,
    role,
    tabIndex,
    tagAttributeProps
  } = props;
  let displayItems = [],
      dI = [];
  let classes = getCompliedClassName(customClassName, {
    [style.base]: true
  });
  let list = getCompliedClassName(customClassName, {
    [style.flex]: true
  }, {
    [customClassName.alignment]: customClassName.alignment,
    [customClassName.wrap]: customClassName.wrap
  });

  if (children) {
    React.Children.toArray(children).map((child, index) => {
      if (index <= visited) {
        child && displayItems.push( /*#__PURE__*/React.cloneElement(child, {
          active: index == active ? true : false,
          key: index,
          onClick: onSelect,
          itemIndex: index,
          size,
          isEllipsis,
          customDataId: customId.item ? `${customId.item}_{id}` : ""
        }));
      }
    });
  } else if (items.length > 0) {
    items.map((child, index) => {
      if (index <= visited) {
        displayItems.push( /*#__PURE__*/React.createElement(BreadCrumbItem, {
          key: index,
          active: index == active ? true : false,
          onClick: onSelect,
          text: child.text,
          itemIndex: index,
          href: child.url,
          itemId: index + 1,
          dataId: customId + index,
          size: size,
          isEllipsis: isEllipsis
        }));
      }
    });
  }

  if (iscollapse) {
    dI.push(displayItems[0]);

    if (maxItems > 1 && maxItems < displayItems.length - 1) {
      for (let index = displayItems.length - 1; index > displayItems.length - maxItems; index--) {
        const element = displayItems[index];
        dI.splice(1, 0, element);
      }
    }

    dI.splice(1, 0, /*#__PURE__*/React.createElement(BreadCrumbItem, {
      text: "...",
      onClick: onCollapse,
      dataId: customId
    }));
  }

  return /*#__PURE__*/React.createElement("nav", _extends({
    "aria-label": ariaLabel,
    className: classes,
    tabIndex: tabIndex,
    role: role
  }, tagAttributeProps), /*#__PURE__*/React.createElement(Group, {
    tagName: "ol",
    seperator: seperator,
    isFrontSeperator: isFrontSeperator,
    seperatorTagName: "li",
    direction: direction,
    align: align
  }, iscollapse ? dI : displayItems));
}