"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Keys = require("@kui-shell/core/mdist/api/Keys");
var _Capabilities = require("@kui-shell/core/mdist/api/Capabilities");
var _Client = require("@kui-shell/core/mdist/api/Client");
var _Button = require("@patternfly/react-core/dist/esm/components/Button");
var _Nav = require("@patternfly/react-core/dist/esm/components/Nav");
var _Masthead = require("@patternfly/react-core/dist/esm/components/Masthead");
var _context = _interopRequireDefault(require("../context"));
var _NewTabButton = _interopRequireDefault(require("./NewTabButton"));
var _Tab = _interopRequireDefault(require("./Tab"));
var _SplitTerminalButton = _interopRequireDefault(require("./SplitTerminalButton"));
var _Icons = _interopRequireDefault(require("../../spi/Icons"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

class TopTabStripe extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this.closeTab = idx => this.props.onCloseTab(idx);
    this.switchTab = idx => this.props.onSwitchTab(idx);
    /** <Masthead/> property */
    this.inset = {
      default: 'insetLg'
    };
    /** <Masthead/> property */
    this.display = {
      default: 'inline'
    };
  }
  componentDidMount() {
    this.addKeyboardListeners();
  }
  /**
   * Register any keyboard event listeners
   *
   */
  addKeyboardListeners() {
    if ((0, _Capabilities.inElectron)()) {
      // switch tabs based on keyboard events
      document.addEventListener('keydown', event => {
        if (event.metaKey && event.shiftKey) {
          // shift-command+[]: switch to previous or next
          const whichDir = event.key;
          if (whichDir === '[' || whichDir === ']') {
            const newIdx = whichDir === '[' ? this.props.activeIdx - 1 : this.props.activeIdx + 1;
            this.props.onSwitchTab(newIdx);
          }
          event.stopPropagation();
          return;
        }
        if (event.ctrlKey) {
          // ctrl+PgUp/PgDown: switch to previous or next
          const whichDir = event.keyCode;
          if (whichDir === _Keys.KeyCodes.PAGEUP || whichDir === _Keys.KeyCodes.PAGEDOWN) {
            const newIdx = whichDir === _Keys.KeyCodes.PAGEUP ? this.props.activeIdx - 1 : this.props.activeIdx + 1;
            this.props.onSwitchTab(newIdx);
          }
          event.stopPropagation();
          return;
        }
        if (event.metaKey) {
          // meta+number: switch to tab by index
          const whichTabStr = event.key;
          if (/\d/.test(whichTabStr)) {
            event.stopPropagation();
            const whichTabIdx = parseInt(whichTabStr, 10);
            this.props.onSwitchTab(whichTabIdx - 1);
          }
        }
      });
    }
  }
  /** Render tabs */
  tabs() {
    return !this.props.noTopTabs && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Nav.Nav, {
      "aria-label": "Tabs",
      variant: "horizontal",
      className: "kui--header-tabs"
    }, _react.default.createElement(_Nav.NavList, {
      className: "kui--tab-list"
    }, this.props.tabs.map((tab, idx) => _react.default.createElement(_Tab.default, Object.assign({}, this.props, {
      key: idx,
      idx: idx,
      uuid: tab.uuid,
      title: tab.title,
      closeable: this.props.closeableTabs,
      active: idx === this.props.activeIdx,
      onCloseTab: this.closeTab,
      onSwitchTab: this.switchTab
    }))))), !(0, _Client.isReadOnlyClient)() && !(this.props.noNewTabButton && this.props.noNewSplitButton) && _react.default.createElement("div", {
      className: "kui--top-tab-buttons"
    }, !this.props.noNewTabButton && _react.default.createElement(_NewTabButton.default, {
      onNewTab: this.props.onNewTab
    }), !this.props.noNewSplitButton && _react.default.createElement(_SplitTerminalButton.default, null)));
  }
  headerName() {
    return _react.default.createElement(_context.default.Consumer, null, config => _react.default.createElement("div", {
      className: "kui--header--name"
    }, config.productName || 'Kui'));
  }
  sidebarToggle() {
    return this.props.needsSidebar && _react.default.createElement(_Masthead.MastheadToggle, {
      className: "kui--top-tab-stripe-header--toggle"
    }, _react.default.createElement(_Button.Button, {
      variant: "plain",
      "aria-label": "Global navigation",
      className: "kui--top-tab-stripe-header--toggle-button",
      onClick: this.props.onToggleSidebar
    }, _react.default.createElement(_Icons.default, {
      icon: "Hamburger",
      className: "kui--top-tab-stripe-header--toggle-button-icon"
    })));
  }
  header() {
    // Note: with @patternfly/react-core version 4.192.15, we have to
    // explicitly choose display and inset properties. Otherwise, the
    // Masthead component seems to determine these asynchronous, after
    // the initial render! Ugh, this results in an odd shifting
    // pattern after a few hundred milliseconds.
    return _react.default.createElement(_Masthead.Masthead, {
      className: "kui--top-tab-stripe-header",
      display: this.display,
      inset: this.inset
    }, this.sidebarToggle(), _react.default.createElement(_Masthead.MastheadMain, {
      className: "kui--top-tab-stripe-header--main"
    }, _react.default.createElement(_Masthead.MastheadBrand, {
      component: "span",
      className: "kui--top-tab-stripe-header--brand",
      tabIndex: -1
    }, this.headerName()), _react.default.createElement(_Masthead.MastheadContent, {
      className: "kui--top-tab-stripe-header--content"
    }, this.tabs())));
  }
  /**
   * React render handler
   *
   */
  render() {
    return this.header();
  }
}
exports.default = TopTabStripe;