import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.array.slice.js';
import React__default, { Children, useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Breadcrumb as Breadcrumb$1, OverflowMenuItem } from '@carbon/react';
import { OverflowMenu } from '../OverflowMenu/index.js';
import { useResize } from '../../internal/UseResizeObserver.js';
import { settings } from '../../constants/Settings.js';
import { OverflowMenuHorizontal } from '@carbon/icons-react';

var _excluded = ["children", "className", "hasOverflow", "testId", "disableTruncation"];
var iotPrefix = settings.iotPrefix;
var propTypes = {
  /**
   * Specify the label for the breadcrumb container
   */
  'aria-label': PropTypes.string,
  /**
   * Pass in the BreadcrumbItem's for your Breadcrumb
   */
  children: PropTypes.node,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes.string,
  /**
   * Optional prop to omit the trailing slash for the breadcrumbs
   */
  noTrailingSlash: PropTypes.bool,
  /**
   * Allow for collapse of breadcrumbs into overflow menu when not enough space, this implies
   * the use of ResizeObserver
   */
  hasOverflow: PropTypes.bool,
  /**
   * Disable truncation on the first or last breadcrumb item.
   */
  disableTruncation: PropTypes.oneOf(['first', 'last', 'none']),
  testId: PropTypes.string
};
var defaultProps = {
  className: null,
  noTrailingSlash: false,
  children: null,
  hasOverflow: false,
  'aria-label': null,
  testId: 'breadcrumb',
  disableTruncation: 'none'
};
var Breadcrumb = function Breadcrumb(_ref) {
  var _breadcrumbRef$curren, _breadcrumbRef$curren2;
  var children = _ref.children,
    className = _ref.className,
    hasOverflow = _ref.hasOverflow,
    testId = _ref.testId,
    disableTruncation = _ref.disableTruncation,
    other = _objectWithoutProperties(_ref, _excluded);
  var childrenItems = Children.map(children, function (child) {
    return child;
  });
  var breakingWidth = useRef([]);
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    overflowItems = _useState2[0],
    setOverflowItems = _useState2[1];
  var _useState3 = useState(childrenItems.slice(1)),
    _useState4 = _slicedToArray(_useState3, 2),
    afterOverflowItems = _useState4[0],
    setAfterOverflowItems = _useState4[1];
  var _useState5 = useState([]),
    _useState6 = _slicedToArray(_useState5, 2),
    prevChildren = _useState6[0],
    setPrevChildren = _useState6[1];
  var breadcrumbRef = useResize(useRef(null));
  useEffect(function () {
    if (hasOverflow && breadcrumbRef) {
      setOverflowItems([]);
      setAfterOverflowItems(childrenItems.slice(1));
      setPrevChildren(children);
    }
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [children]);
  /** update breadcrumbs  */
  useEffect(function () {
    if (hasOverflow && breadcrumbRef && breadcrumbRef.current) {
      // The visible list is overflowing
      if (breadcrumbRef.current.clientWidth < breadcrumbRef.current.scrollWidth) {
        // Record the width of the list
        breakingWidth.current.push(breadcrumbRef.current.scrollWidth);
        if (afterOverflowItems.length > 1) {
          // Move item to the hidden list
          setOverflowItems([].concat(_toConsumableArray(overflowItems), [afterOverflowItems.shift()]));
          setAfterOverflowItems(_toConsumableArray(afterOverflowItems));
        }
        // The visible list is not overflowing
      } else if (breakingWidth.current[breakingWidth.current.length - 1] >= 0 && breadcrumbRef.current.clientWidth > breakingWidth.current[breakingWidth.current.length - 1] && overflowItems.length > 0) {
        // Move the item to the visible list
        setAfterOverflowItems([overflowItems.pop()].concat(_toConsumableArray(afterOverflowItems)));
        setOverflowItems(_toConsumableArray(overflowItems));
        breakingWidth.current.pop();
      }
    }
  }, /* eslint-disable react-hooks/exhaustive-deps */
  [breadcrumbRef === null || breadcrumbRef === void 0 || (_breadcrumbRef$curren = breadcrumbRef.current) === null || _breadcrumbRef$curren === void 0 ? void 0 : _breadcrumbRef$curren.clientWidth, breadcrumbRef === null || breadcrumbRef === void 0 || (_breadcrumbRef$curren2 = breadcrumbRef.current) === null || _breadcrumbRef$curren2 === void 0 ? void 0 : _breadcrumbRef$curren2.scrollWidth, prevChildren]
  /* eslint-enable react-hooks/exhaustive-deps */);
  return /*#__PURE__*/React__default.createElement("div", {
    className: classnames('breadcrumb--container', _defineProperty({
      'breadcrumb--container__overflowfull': afterOverflowItems.length === 1
    }, "".concat(iotPrefix, "--breadcrumb-expand--").concat(disableTruncation), disableTruncation !== 'none')),
    ref: breadcrumbRef
    // TODO: fix in v3
    ,
    "data-testid": "overflow"
  }, breadcrumbRef && hasOverflow ? /*#__PURE__*/React__default.createElement(Breadcrumb$1, _extends({
    "data-testid": testId,
    className: className
  }, other), childrenItems[0], overflowItems.length > 0 && /*#__PURE__*/React__default.createElement("span", {
    className: "breadcrumb--overflow"
  }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
    "data-testid": "".concat(testId, "-overflow-menu"),
    renderIcon: function renderIcon(props) {
      return /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, _extends({
        size: 20
      }, props));
    },
    menuOptionsClass: "breadcrumb--overflow-items"
  }, overflowItems.map(function (child, i) {
    return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({}, child.props, {
      "data-testid": "".concat(testId, "-overflow-menu-item-").concat(i),
      title: child.props.children,
      key: "".concat(child.props.children, "-").concat(i),
      itemText: child.props.children
    }));
  }))), afterOverflowItems) : /*#__PURE__*/React__default.createElement(Breadcrumb$1, _extends({
    "data-testid": testId,
    className: className
  }, other), children));
};
Breadcrumb.propTypes = propTypes;
Breadcrumb.defaultProps = defaultProps;
Breadcrumb.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Breadcrumb",
  "props": {
    "className": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Specify an optional className to be applied to the container node",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "noTrailingSlash": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Optional prop to omit the trailing slash for the breadcrumbs",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "children": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Pass in the BreadcrumbItem's for your Breadcrumb",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "hasOverflow": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Allow for collapse of breadcrumbs into overflow menu when not enough space, this implies\nthe use of ResizeObserver",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "aria-label": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Specify the label for the breadcrumb container",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'breadcrumb'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "disableTruncation": {
      "defaultValue": {
        "value": "'none'",
        "computed": false
      },
      "description": "Disable truncation on the first or last breadcrumb item.",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'first'",
          "computed": false
        }, {
          "value": "'last'",
          "computed": false
        }, {
          "value": "'none'",
          "computed": false
        }]
      },
      "required": false
    }
  }
};
var BreadCrumb = Breadcrumb;

export { BreadCrumb as default };
