"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _Text = _interopRequireDefault(require("../Text"));
var _system = require("@wix/wix-ui-icons-common/system");
var _constants = require("./constants");
var _BreadcrumbsSt = require("./Breadcrumbs.st.css.js");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Breadcrumbs/Breadcrumbs.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
 * a way to visualise current navigation path
 */
var Breadcrumbs = /*#__PURE__*/function (_React$PureComponent) {
  function Breadcrumbs() {
    var _this;
    (0, _classCallCheck2["default"])(this, Breadcrumbs);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, Breadcrumbs, [].concat(args));
    _this._getIsActive = function (item) {
      return _this.props.activeId === item.id;
    };
    _this._handleItemClick = function (item) {
      return function (event) {
        return !item.disabled && _this.props.onClick(item, event);
      };
    };
    _this._getItemWrapperDataAttributes = function (_ref) {
      var position = _ref.position,
        item = _ref.item;
      return (0, _defineProperty2["default"])((0, _defineProperty2["default"])({
        'data-hook': "".concat(_constants.DATA_HOOKS.ITEM_WRAPPER, "-").concat(position)
      }, _constants.DATA_ATTRIBUTES.DATA_ACTIVE, _this._getIsActive(item)), _constants.DATA_ATTRIBUTES.DATA_POSITION_ID, position);
    };
    return _this;
  }
  (0, _inherits2["default"])(Breadcrumbs, _React$PureComponent);
  return (0, _createClass2["default"])(Breadcrumbs, [{
    key: "_createItem",
    value: function _createItem(_ref3) {
      var _this2 = this;
      var item = _ref3.item,
        isActive = _ref3.isActive,
        onClick = _ref3.onClick,
        maxWidth = _ref3.maxWidth,
        id = _ref3.id;
      var active = isActive;
      var breadcrumbText = function breadcrumbText(value) {
        var _this2$props = _this2.props,
          theme = _this2$props.theme,
          size = _this2$props.size;
        var skin = _this2.props.skin || theme;
        return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
          dataHook: _constants.DATA_HOOKS.BREADCRUMBS_ITEM,
          weight: isActive ? 'normal' : 'thin',
          light: skin === _constants.SKINS.onDarkBackground,
          size: _constants.TEXT_SIZES[size],
          ellipsis: true,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 27,
            columnNumber: 9
          }
        }, value);
      };
      var defaultBreadcrumb = function defaultBreadcrumb(id) {
        var disabled = item.disabled;
        var className = _this2.props.className;
        var button = true;
        return /*#__PURE__*/_react["default"].createElement("button", {
          type: "button",
          "data-hook": "".concat(_constants.DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
          className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.item, {
            button: button,
            disabled: disabled,
            active: active
          }, className),
          onClick: onClick,
          children: breadcrumbText(item.value),
          style: {
            maxWidth: maxWidth
          },
          tabIndex: isActive || disabled ? -1 : 0,
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 44,
            columnNumber: 9
          }
        });
      };
      var linkBreadcrumb = function linkBreadcrumb(id) {
        var disabled = item.disabled;
        var className = _this2.props.className;
        var link = true;
        return /*#__PURE__*/_react["default"].createElement("a", {
          href: item.link,
          "data-hook": "".concat(_constants.DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
          className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.item, {
            link: link,
            disabled: disabled,
            active: active
          }, className),
          onClick: onClick,
          children: breadcrumbText(item.value),
          style: {
            maxWidth: maxWidth
          },
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 61,
            columnNumber: 9
          }
        });
      };
      var customBreadcrumb = function customBreadcrumb(id) {
        var className = _this2.props.className;
        return /*#__PURE__*/_react["default"].createElement("span", {
          "data-hook": "".concat(_constants.DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
          className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.item, {}, className),
          onClick: onClick,
          children: breadcrumbText(item.customElement),
          style: {
            maxWidth: maxWidth
          },
          __self: _this2,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 75,
            columnNumber: 9
          }
        });
      };
      if (isActive) {
        return defaultBreadcrumb(id);
      } else if (item.customElement) {
        return customBreadcrumb(id);
      } else if (item.link) {
        return linkBreadcrumb(id);
      } else {
        return defaultBreadcrumb(id);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;
      var _this$props = this.props,
        items = _this$props.items,
        size = _this$props.size,
        itemMaxWidth = _this$props.itemMaxWidth,
        theme = _this$props.theme,
        className = _this$props.className,
        dataHook = _this$props.dataHook;
      var fullWidth = items.length === 1;
      var skin = this.props.skin || theme;
      if (theme) {
        (0, _deprecationLog["default"])('<Breadcrumbs/> - prop "theme" is deprecated and will be removed in next major release, please use "skin" property instead.');
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": dataHook,
        className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.root, {
          size: size,
          skin: skin
        }, className),
        "data-size": size,
        "data-skin": skin,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 122,
          columnNumber: 7
        }
      }, items.map(function (item, i, allItems) {
        var active = _this3._getIsActive(item);
        return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
          key: item.id,
          className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.itemContainer, {
            active: active
          })
        }, _this3._getItemWrapperDataAttributes({
          position: i,
          item: item
        }), {
          __self: _this3,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 131,
            columnNumber: 13
          }
        }), _this3._createItem({
          id: i,
          item: item,
          isActive: active,
          onClick: _this3._handleItemClick(item),
          maxWidth: fullWidth ? '100%' : itemMaxWidth
        }), allItems[i + 1] && /*#__PURE__*/_react["default"].createElement(_system.BreadcrumbsChevronRight, {
          className: _BreadcrumbsSt.classes.divider,
          __self: _this3,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 144,
            columnNumber: 17
          }
        }));
      }));
    }
  }]);
}(_react["default"].PureComponent);
Breadcrumbs.displayName = 'Breadcrumbs';
Breadcrumbs.defaultProps = {
  size: 'medium',
  theme: 'onGrayBackground',
  // TODO: add default value for skin once theme is removed
  itemMaxWidth: '240px',
  onClick: function onClick() {}
};
var _default = exports["default"] = Breadcrumbs;