'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var useHasFocus = require('../../../hooks/useHasFocus.js');
var useKeyPress = require('../../../hooks/useKeyPress.js');
var styles = require('../styles.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function Tab({ tab, selected, narrow, expandClickFlag, setSelectedRef, onChange, testId, trackId, }) {
    const ref = React.useRef(null);
    const { hasFocus } = useHasFocus.useHasFocus(ref);
    const enterPressed = useKeyPress.useKeyPress('Enter', ref);
    React.useEffect(() => {
        if (selected)
            setSelectedRef(ref);
    }, [selected]);
    React.useEffect(() => {
        if (enterPressed && hasFocus) {
            onChange(tab);
        }
    }, [enterPressed, hasFocus]);
    React.useEffect(() => {
        var _a;
        if (expandClickFlag) {
            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
        }
    }, [expandClickFlag]);
    return (React__default['default'].createElement(styles.TabWrapper, { ref: ref, tabIndex: 0, role: "tab", "aria-selected": selected ? 'true' : 'false', narrow: narrow, selected: selected, disabled: tab.disabled, onClick: () => onChange(tab), "data-testid": testId, "data-trackid": trackId }, tab.label));
}

exports.Tab = Tab;
