"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UITabs = exports.UIPivot = exports.UITabsItem = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
Object.defineProperty(exports, "UIPivot", { enumerable: true, get: function () { return react_2.Pivot; } });
Object.defineProperty(exports, "UITabsItem", { enumerable: true, get: function () { return react_2.PivotItem; } });
/**
 * UITabs component.
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/pivot
 *
 * @exports
 * @class UITabs
 * @extends {React.Component<IPivotProps, {}>}
 */
class UITabs extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {UITabsProps} props
     */
    constructor(props) {
        super(props);
        this.setTabsStyle = () => {
            return {
                root: {
                    color: 'var(--vscode-tab-activeForeground)',
                    borderBottom: '1px solid var(--vscode-dropdown-border)'
                },
                link: {
                    color: 'var(--vscode-tab-inactiveForeground)',
                    selectors: {
                        '&:active, &:hover': {
                            backgroundColor: 'transparent',
                            color: 'var(--vscode-tab-activeForeground)'
                        }
                    }
                },
                linkIsSelected: {
                    color: 'var(--vscode-tab-activeForeground)',
                    selectors: {
                        '&:before': {
                            height: 1,
                            transition: 'none',
                            left: 0,
                            right: 0,
                            backgroundColor: 'var(--vscode-inputOption-activeForeground)'
                        }
                    }
                },
                linkContent: {},
                text: {
                    fontSize: 13
                }
            };
        };
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        return (react_1.default.createElement(react_2.Pivot, { ...this.props, styles: this.setTabsStyle() }, this.props.items.map((itemValue) => {
            return react_1.default.createElement(react_2.PivotItem, { headerText: itemValue, key: itemValue, itemKey: itemValue });
        })));
    }
}
exports.UITabs = UITabs;
//# sourceMappingURL=UITabs.js.map