import React__default, { useRef, useEffect } from 'react';
import { useHasFocus } from '../../../hooks/useHasFocus.js';
import { useKeyPress } from '../../../hooks/useKeyPress.js';
import { TabWrapper } from '../styles.js';

function Tab({ tab, selected, narrow, expandClickFlag, setSelectedRef, onChange, testId, trackId, }) {
    const ref = useRef(null);
    const { hasFocus } = useHasFocus(ref);
    const enterPressed = useKeyPress('Enter', ref);
    useEffect(() => {
        if (selected)
            setSelectedRef(ref);
    }, [selected]);
    useEffect(() => {
        if (enterPressed && hasFocus) {
            onChange(tab);
        }
    }, [enterPressed, hasFocus]);
    useEffect(() => {
        var _a;
        if (expandClickFlag) {
            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
        }
    }, [expandClickFlag]);
    return (React__default.createElement(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));
}

export { Tab };
