text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  const tslib_1 = require("tslib");
  const React = tslib_1.__importStar(require("react"));
  const tabs_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Tabs/tabs"));
  const button_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Button/button"));
  const react_styles_1 = require("@patternfly/react-styles");
  const angle_left_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/angle-left-icon"));
  const angle_right_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/angle-right-icon"));
  const util_1 = require("../../helpers/util");
  const TabButton_1 = require("./TabButton");
  const TabContent_1 = require("./TabContent");
  const helpers_1 = require("../../helpers");
  var TabsVariant;
  (function (TabsVariant) {
      TabsVariant["div"] = "div";
      TabsVariant["nav"] = "nav";
  })(TabsVariant = exports.TabsVariant || (exports.TabsVariant = {}));
  class Tabs extends React.Component {
      constructor(props) {
          super(props);
          this.tabList = React.createRef();
          this.scrollLeft = () => {
              // find first Element that is fully in view on the left, then scroll to the element before it
              if (this.tabList.current) {
                  const container = this.tabList.current;
                  const childrenArr = Array.from(container.children);
                  let firstElementInView;
                  let lastElementOutOfView;
                  let i;
                  for (i = 0; i < childrenArr.length && !firstElementInView; i++) {
                      if (util_1.isElementInView(container, childrenArr[i], false)) {
                          firstElementInView = childrenArr[i];
                          lastElementOutOfView = childrenArr[i - 1];
                      }
                  }
                  if (lastElementOutOfView) {
                      container.scrollLeft -= lastElementOutOfView.scrollWidth;
                  }
              }
          };
          this.scrollRight = () => {
              // find last Element that is fully in view on the right, then scroll to the element after it
              if (this.tabList.current) {
                  const container = this.tabList.current;
                  const childrenArr = Array.from(container.children);
                  let lastElementInView;
                  let firstElementOutOfView;
                  for (let i = childrenArr.length - 1; i >= 0 && !lastElementInView; i--) {
                      if (util_1.isElementInView(container, childrenArr[i], false)) {
                          lastElementInView = childrenArr[i];
                          firstElementOutOfView = childrenArr[i + 1];
                      }
                  }
                  if (firstElementOutOfView) {
                      container.scrollLeft += firstElementOutOfView.scrollWidth;
                  }
              }
          };
          this.state = {
              shownKeys: [this.props.activeKey] // only for mountOnEnter case
          };
      }
      handleTabClick(event, eventKey, tabContentRef, mountOnEnter) {
          const { shownKeys } = this.state;
          this.props.onSelect(event, eventKey);
          // process any tab content sections outside of the component
          if (tabContentRef) {
              // eslint-disable-next-line @typescript-eslint/no-unused-vars
              React.Children.map(this.props.children, (child, i) => {
                  child.props.tabContentRef.current.hidden = true;
              });
              // most recently selected tabContent
              tabContentRef.current.hidden = false;
          }
          if (mountOnEnter) {
              this.setState({
                  shownKeys: shownKeys.concat(eventKey)
              });
          }
      }
      render() {
          const _a = this.props, { className, children, activeKey, id, isFilled, isSecondary, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, variant, ouiaId, mountOnEnter, unmountOnExit } = _a, props = tslib_1.__rest(_a, ["className", "children", "activeKey", "id", "isFilled", "isSecondary", "leftScrollAriaLabel", "rightScrollAriaLabel", 'aria-label', "variant", "ouiaId", "mountOnEnter", "unmountOnExit"]);
          const { shownKeys } = this.state;
          const uniqueId = id || util_1.getUniqueId();
          const Component = variant === TabsVariant.nav ? 'nav' : 'div';
          return (React.createElement(React.Fragment, null,
              React.createElement(Component, Object.assign({ "aria-label": ariaLabel, className: react_styles_1.css(tabs_1.default.tabs, isFilled && tabs_1.default.modifiers.fill, isSecondary && tabs_1.default.modifiers.secondary, className) }, helpers_1.getOUIAProps('Tabs', ouiaId), { id: id && id }, props),
                  React.createElement("button", { className: react_styles_1.css(tabs_1.default.tabsScrollButton, isSecondary && button_1.default.modifiers.secondary), "aria-label": leftScrollAriaLabel, onClick: this.scrollLeft },
                      React.createElement(angle_left_icon_1.default, null)),
                  React.createElement("ul", { className: react_styles_1.css(tabs_1.default.tabsList), ref: this.tabList }, React.Children.map(children, (child, index) => {
                      const _a = child.props, { title, eventKey, tabContentRef, id: childId, tabContentId } = _a, rest = tslib_1.__rest(_a, ["title", "eventKey", "tabContentRef", "id", "tabContentId"]);
                      return (React.createElement("li", { key: index, className: react_styles_1.css(tabs_1.default.tabsItem, eventKey === activeKey && tabs_1.default.modifiers.current, className) },
                          React.createElement(TabButton_1.TabButton, Object.assign({ className: react_styles_1.css(tabs_1.default.tabsButton), onClick: (event) => this.handleTabClick(event, eventKey, tabContentRef, mountOnEnter), id: `pf-tab-${eventKey}-${childId || uniqueId}`, "aria-controls": tabContentId ? `${tabContentId}` : `pf-tab-section-${eventKey}-${childId || uniqueId}`, tabContentRef: tabContentRef }, rest), title)));
                  })),
                  React.createElement("button", { className: react_styles_1.css(tabs_1.default.tabsScrollButton, isSecondary && button_1.default.modifiers.secondary), "aria-label": rightScrollAriaLabel, onClick: this.scrollRight },
                      React.createElement(angle_right_icon_1.default, null))),
              React.Children.map(children, (child, index) => {
                  if (!child.props.children ||
                      (unmountOnExit && child.props.eventKey !== activeKey) ||
                      (mountOnEnter && shownKeys.indexOf(child.props.eventKey) === -1)) {
                      return null;
                  }
                  else {
                      return React.createElement(TabContent_1.TabContent, { key: index, activeKey: activeKey, child: child, id: child.props.id || uniqueId });
                  }
              })));
      }
  }
  exports.Tabs = Tabs;
  Tabs.defaultProps = {
      className: '',
      activeKey: 0,
      onSelect: () => undefined,
      isFilled: false,
      isSecondary: false,
      leftScrollAriaLabel: 'Scroll left',
      rightScrollAriaLabel: 'Scroll right',
      variant: TabsVariant.div,
      mountOnEnter: false,
      unmountOnExit: false
  };
  //# sourceMappingURL=Tabs.js.map