/*
 * 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.
 */
import React from 'react';
import { Capabilities, KeyCodes, isReadOnlyClient } from '@kui-shell/core';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import { Nav, NavList } from '@patternfly/react-core/dist/esm/components/Nav';
import { Masthead, MastheadMain, MastheadBrand, MastheadContent, MastheadToggle } from '@patternfly/react-core/dist/esm/components/Masthead';
import KuiContext from '../context';
import NewTabButton from './NewTabButton';
import Tab from './Tab';
import SplitTerminalButton from './SplitTerminalButton';
import Icons from '../../spi/Icons';
import '../../../../web/scss/components/TopTabStripe/_index.scss';
export default class TopTabStripe extends React.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 (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 === KeyCodes.PAGEUP || whichDir === KeyCodes.PAGEDOWN) {
                        const newIdx = whichDir === 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.createElement(React.Fragment, null,
            React.createElement(Nav, { "aria-label": "Tabs", variant: "horizontal", className: "kui--header-tabs" },
                React.createElement(NavList, { className: "kui--tab-list" }, this.props.tabs.map((tab, idx) => (React.createElement(Tab, 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 })))))),
            !isReadOnlyClient() && !(this.props.noNewTabButton && this.props.noNewSplitButton) && (React.createElement("div", { className: "kui--top-tab-buttons" },
                !this.props.noNewTabButton && React.createElement(NewTabButton, { onNewTab: this.props.onNewTab }),
                !this.props.noNewSplitButton && React.createElement(SplitTerminalButton, null))))));
    }
    headerName() {
        return (React.createElement(KuiContext.Consumer, null, config => React.createElement("div", { className: "kui--header--name" }, config.productName || 'Kui')));
    }
    sidebarToggle() {
        return (this.props.needsSidebar && (React.createElement(MastheadToggle, { className: "kui--top-tab-stripe-header--toggle" },
            React.createElement(Button, { variant: "plain", "aria-label": "Global navigation", className: "kui--top-tab-stripe-header--toggle-button", onClick: this.props.onToggleSidebar },
                React.createElement(Icons, { 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.createElement(Masthead, { className: "kui--top-tab-stripe-header", display: this.display, inset: this.inset },
            this.sidebarToggle(),
            React.createElement(MastheadMain, { className: "kui--top-tab-stripe-header--main" },
                React.createElement(MastheadBrand, { component: "span", className: "kui--top-tab-stripe-header--brand", tabIndex: -1 }, this.headerName()),
                React.createElement(MastheadContent, { className: "kui--top-tab-stripe-header--content" }, this.tabs()))));
    }
    /**
     * React render handler
     *
     */
    render() {
        return this.header();
    }
}
//# sourceMappingURL=index.js.map