import * as React from 'react';
import { Ripple } from 'primereact/ripple';
import { ObjectUtils, classNames, DomHandler, IconUtils } from 'primereact/utils';

function _extends() {
  _extends = Object.assign || 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);
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];

  if (_i == null) return;
  var _arr = [];
  var _n = true;
  var _d = false;

  var _s, _e;

  try {
    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) {
    arr2[i] = arr[i];
  }

  return arr2;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

var TabMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _React$useState = React.useState(props.activeIndex),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      activeIndexState = _React$useState2[0],
      setActiveIndexState = _React$useState2[1];

  var inkbarRef = React.useRef(null);
  var navRef = React.useRef(null);
  var tabsRef = React.useRef({});
  var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;

  var itemClick = function itemClick(event, item, index) {
    if (item.disabled) {
      event.preventDefault();
      return;
    }

    if (!item.url) {
      event.preventDefault();
    }

    if (item.command) {
      item.command({
        originalEvent: event,
        item: item
      });
    }

    if (props.onTabChange) {
      props.onTabChange({
        originalEvent: event,
        value: item,
        index: index
      });
    } else {
      setActiveIndexState(index);
    }
  };

  var isSelected = function isSelected(index) {
    return index === (activeIndex || 0);
  };

  var updateInkBar = function updateInkBar() {
    var tabHeader = tabsRef.current["tab_".concat(activeIndex)];
    inkbarRef.current.style.width = DomHandler.getWidth(tabHeader) + 'px';
    inkbarRef.current.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(navRef.current).left + 'px';
  };

  React.useEffect(function () {
    updateInkBar();
  });

  var createMenuItem = function createMenuItem(item, index) {
    var _className = item.className,
        style = item.style,
        disabled = item.disabled,
        _icon = item.icon,
        _label = item.label,
        template = item.template,
        url = item.url,
        target = item.target;
    var key = _label + '_' + index;
    var active = isSelected(index);
    var className = classNames('p-tabmenuitem', {
      'p-highlight': active,
      'p-disabled': disabled
    }, _className);
    var iconClassName = classNames('p-menuitem-icon', _icon);
    var icon = IconUtils.getJSXIcon(_icon, {
      className: 'p-menuitem-icon'
    }, {
      props: props
    });

    var label = _label && /*#__PURE__*/React.createElement("span", {
      className: "p-menuitem-text"
    }, _label);

    var content = /*#__PURE__*/React.createElement("a", {
      href: url || '#',
      className: "p-menuitem-link",
      target: target,
      onClick: function onClick(event) {
        return itemClick(event, item, index);
      },
      role: "presentation"
    }, icon, label, /*#__PURE__*/React.createElement(Ripple, null));

    if (template) {
      var defaultContentOptions = {
        onClick: function onClick(event) {
          return itemClick(event, item, index);
        },
        className: 'p-menuitem-link',
        labelClassName: 'p-menuitem-text',
        iconClassName: iconClassName,
        element: content,
        props: props,
        active: active,
        index: index
      };
      content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
    }

    return /*#__PURE__*/React.createElement("li", {
      ref: tabsRef.current["tab_".concat(index)],
      key: key,
      className: className,
      style: style,
      role: "tab",
      "aria-selected": active,
      "aria-expanded": active,
      "aria-disabled": disabled
    }, content);
  };

  var createItems = function createItems() {
    return props.model.map(createMenuItem);
  };

  if (props.model) {
    var otherProps = ObjectUtils.findDiffKeys(props, TabMenu.defaultProps);
    var className = classNames('p-tabmenu p-component', props.className);
    var items = createItems();
    return /*#__PURE__*/React.createElement("div", _extends({
      id: props.id,
      className: className,
      style: props.style
    }, otherProps), /*#__PURE__*/React.createElement("ul", {
      ref: navRef,
      className: "p-tabmenu-nav p-reset",
      role: "tablist"
    }, items, /*#__PURE__*/React.createElement("li", {
      ref: inkbarRef,
      className: "p-tabmenu-ink-bar"
    })));
  }

  return null;
}));
TabMenu.displayName = 'TabMenu';
TabMenu.defaultProps = {
  __TYPE: 'TabMenu',
  id: null,
  model: null,
  activeIndex: 0,
  style: null,
  className: null,
  onTabChange: null
};

export { TabMenu };
