import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useRef, useMemo, useEffect, useState } from "react";
import { StyledNavElement, StyledOList, StyledMenuList, StyledListWrapper, StyledBreadcrumbListItem } from "./Styles";
import { useForkRef, useResizeObserver } from "../../utils";
import { IconButton } from "../IconButton";
import { TreeDotsIcon } from "../Icons";
import { ListItem } from "../List";
import { Menu } from "../Menu";
export const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  var _dimensions$width, _childDimensions$widt;
  let {
    children,
    className,
    separator = "/",
    ...rest
  } = _ref;
  const internalRef = useRef(null);
  const listWrapperRef = useRef(null);
  const olRef = useRef(null);
  const widthCollectionRef = useRef([]);
  const handleRef = useForkRef(ref, internalRef);
  const [menuBreadcrumbs, setMenuBreadcrumbs] = useState(0);
  const dimensions = useResizeObserver(internalRef);
  const childDimensions = useResizeObserver(listWrapperRef);
  const parentWidth = (_dimensions$width = dimensions == null ? void 0 : dimensions.width) != null ? _dimensions$width : 0;
  const childWidth = (_childDimensions$widt = childDimensions == null ? void 0 : childDimensions.width) != null ? _childDimensions$widt : 0;
  const childrenCollection = useMemo(() => React.Children.toArray(children), [children]);
  const [menuCollection, listCollection] = useMemo(() => {
    return [childrenCollection.slice(0, menuBreadcrumbs), childrenCollection.slice(menuBreadcrumbs, childrenCollection.length)];
  }, [childrenCollection, menuBreadcrumbs]);
  useEffect(() => {
    widthCollectionRef.current = [];
    setMenuBreadcrumbs(0);
  }, [childrenCollection.length]);
  useEffect(() => {
    const diffWidth = childWidth - parentWidth;
    if (diffWidth > 0) {
      var _offsetWidth, _olRef$current, _olRef$current$queryS, _olRef$current2, _breadcrumbItems$leng;
      const separatorWidth = (_offsetWidth = (_olRef$current = olRef.current) == null || (_olRef$current = _olRef$current.querySelectorAll("[data-role=\"separator\"]")[0]) == null ? void 0 : _olRef$current.offsetWidth) != null ? _offsetWidth : 0;
      const breadcrumbItems = (_olRef$current$queryS = (_olRef$current2 = olRef.current) == null ? void 0 : _olRef$current2.querySelectorAll("[data-role=\"item\"]")) != null ? _olRef$current$queryS : [];
      const childWidthCollection = [];
      const maxIndex = ((_breadcrumbItems$leng = breadcrumbItems == null ? void 0 : breadcrumbItems.length) != null ? _breadcrumbItems$leng : 1) - 1;
      let currentIndex = 0;
      let childSumWidth = 0;
      while (diffWidth > childSumWidth && maxIndex >= currentIndex) {
        var _offsetWidth2, _breadcrumbItems$curr;
        const childWidth = (_offsetWidth2 = (_breadcrumbItems$curr = breadcrumbItems[currentIndex]) == null ? void 0 : _breadcrumbItems$curr.offsetWidth) != null ? _offsetWidth2 : 0;
        const result = separatorWidth + childWidth;
        childWidthCollection.push(result);
        childSumWidth += result;
        currentIndex += 1;
      }
      if (childWidthCollection.length === listCollection.length) {
        childWidthCollection.pop();
      }
      widthCollectionRef.current = [...widthCollectionRef.current, ...childWidthCollection];
      setMenuBreadcrumbs(oldVal => oldVal + childWidthCollection.length);
    }
  }, [listCollection.length, parentWidth, childWidth]);
  useEffect(() => {
    const diffWidth = parentWidth - childWidth;
    if (diffWidth > 0 && widthCollectionRef.current.length > 0) {
      const total = widthCollectionRef.current.length;
      const collection = [...widthCollectionRef.current];
      let sumWidth = 0;
      while (diffWidth > sumWidth && collection.length > 0) {
        var _collection;
        const lastWidth = (_collection = collection[collection.length - 1]) != null ? _collection : 0;
        if (diffWidth < lastWidth + sumWidth) {
          sumWidth = diffWidth;
        } else {
          var _collection$pop;
          sumWidth += (_collection$pop = collection.pop()) != null ? _collection$pop : 0;
        }
      }
      const totalToDecrease = total - collection.length;
      setMenuBreadcrumbs(oldVal => {
        const newValue = oldVal - totalToDecrease;
        return newValue > 0 ? newValue : 0;
      });
      const end = total - totalToDecrease;
      widthCollectionRef.current = end > 0 ? widthCollectionRef.current.slice(0, end) : [];
    }
  }, [parentWidth, childWidth]);
  return /*#__PURE__*/React.createElement(StyledNavElement, _extends({
    className: className,
    ref: handleRef
  }, rest), /*#__PURE__*/React.createElement(StyledListWrapper, {
    ref: listWrapperRef
  }, /*#__PURE__*/React.createElement(StyledOList, {
    ref: olRef
  }, menuCollection.length > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, {
    "data-role": "menu"
  }, /*#__PURE__*/React.createElement(Menu, {
    target: /*#__PURE__*/React.createElement(IconButton, {
      variant: "text gray"
    }, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
  }, /*#__PURE__*/React.createElement(StyledMenuList, null, menuCollection.map((child, index) => /*#__PURE__*/React.createElement(ListItem, {
    key: index
  }, child))))) : null, listCollection.map((child, index) => {
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: index
    }, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, {
      "data-role": "separator"
    }, separator) : null, /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, {
      "data-role": "item"
    }, child));
  }))));
});
Breadcrumbs.displayName = "Breadcrumbs";
//# sourceMappingURL=Breadcrumbs.js.map