'use strict';

var _extends = require('@babel/runtime/helpers/extends');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.map.js');
require('core-js/modules/es.array.slice.js');
var React = require('react');
var PropTypes = require('prop-types');
var classnames = require('classnames');
var react = require('@carbon/react');
var index = require('../OverflowMenu/index.js');
var UseResizeObserver = require('../../internal/UseResizeObserver.js');
var Settings = require('../../constants/Settings.js');
var iconsReact = require('@carbon/icons-react');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

var _excluded = ["children", "className", "hasOverflow", "testId", "disableTruncation"];
var iotPrefix = Settings.settings.iotPrefix;
var propTypes = {
  /**
   * Specify the label for the breadcrumb container
   */
  'aria-label': PropTypes__default.default.string,
  /**
   * Pass in the BreadcrumbItem's for your Breadcrumb
   */
  children: PropTypes__default.default.node,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes__default.default.string,
  /**
   * Optional prop to omit the trailing slash for the breadcrumbs
   */
  noTrailingSlash: PropTypes__default.default.bool,
  /**
   * Allow for collapse of breadcrumbs into overflow menu when not enough space, this implies
   * the use of ResizeObserver
   */
  hasOverflow: PropTypes__default.default.bool,
  /**
   * Disable truncation on the first or last breadcrumb item.
   */
  disableTruncation: PropTypes__default.default.oneOf(['first', 'last', 'none']),
  testId: PropTypes__default.default.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__default.default(_ref, _excluded);
  var childrenItems = React.Children.map(children, function (child) {
    return child;
  });
  var breakingWidth = React.useRef([]);
  var _useState = React.useState([]),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    overflowItems = _useState2[0],
    setOverflowItems = _useState2[1];
  var _useState3 = React.useState(childrenItems.slice(1)),
    _useState4 = _slicedToArray__default.default(_useState3, 2),
    afterOverflowItems = _useState4[0],
    setAfterOverflowItems = _useState4[1];
  var _useState5 = React.useState([]),
    _useState6 = _slicedToArray__default.default(_useState5, 2),
    prevChildren = _useState6[0],
    setPrevChildren = _useState6[1];
  var breadcrumbRef = UseResizeObserver.useResize(React.useRef(null));
  React.useEffect(function () {
    if (hasOverflow && breadcrumbRef) {
      setOverflowItems([]);
      setAfterOverflowItems(childrenItems.slice(1));
      setPrevChildren(children);
    }
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [children]);
  /** update breadcrumbs  */
  React.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__default.default(overflowItems), [afterOverflowItems.shift()]));
          setAfterOverflowItems(_toConsumableArray__default.default(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__default.default(afterOverflowItems)));
        setOverflowItems(_toConsumableArray__default.default(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.default.createElement("div", {
    className: classnames__default.default('breadcrumb--container', _defineProperty__default.default({
      '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.default.createElement(react.Breadcrumb, _extends__default.default({
    "data-testid": testId,
    className: className
  }, other), childrenItems[0], overflowItems.length > 0 && /*#__PURE__*/React__default.default.createElement("span", {
    className: "breadcrumb--overflow"
  }, /*#__PURE__*/React__default.default.createElement(index.OverflowMenu, {
    "data-testid": "".concat(testId, "-overflow-menu"),
    renderIcon: function renderIcon(props) {
      return /*#__PURE__*/React__default.default.createElement(iconsReact.OverflowMenuHorizontal, _extends__default.default({
        size: 20
      }, props));
    },
    menuOptionsClass: "breadcrumb--overflow-items"
  }, overflowItems.map(function (child, i) {
    return /*#__PURE__*/React__default.default.createElement(react.OverflowMenuItem, _extends__default.default({}, 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.default.createElement(react.Breadcrumb, _extends__default.default({
    "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;

module.exports = BreadCrumb;
