'use strict';

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

var _tslib = require('../../_virtual/_tslib.js');
var React = require('react');
var Tab = require('./components/Tab.js');
var MoreHorizontal = require('../../icons/MoreHorizontal.js');
var index = require('../IconButton/index.js');
var OpenTabs = require('./components/OpenTabs.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);

const EXPAND_BTN_WIDTH = 20;
function Tabs(_a) {
    var _b, _c;
    var { id, tabs, selectedTab, brandColor = true, narrow = false, showExpandButton = false, title = '', dismissText = 'Dismiss', onChange, rtl = false } = _a, props = _tslib.__rest(_a, ["id", "tabs", "selectedTab", "brandColor", "narrow", "showExpandButton", "title", "dismissText", "onChange", "rtl"]);
    const wrapperRef = React.useRef(null);
    const containerRef = React.useRef(null);
    const [selectedRef, setSelectedRef] = React.useState();
    const [showBottomSheet, setShowBottomSheet] = React.useState(false);
    const [endOfScroll, setEndOfScroll] = React.useState(false);
    const [expandClickFlag, setExpandClickFlag] = React.useState(false);
    const [indicatorValues, setIndicatorValues] = React.useState({
        left: 0,
        width: 0,
    });
    const [hasOverflow, setHasOverflow] = React.useState(false);
    const expandWrapperLeft = containerRef && containerRef.current && containerRef.current.offsetWidth;
    React.useEffect(() => {
        const current = containerRef.current;
        if (containerRef && current) {
            setHasOverflow(current.offsetWidth < current.scrollWidth);
        }
    }, [containerRef.current, narrow, window.innerWidth]);
    React.useEffect(() => {
        if (selectedRef && selectedRef.current) {
            setIndicatorValues({
                left: selectedRef.current.offsetLeft,
                width: selectedRef.current.offsetWidth,
            });
        }
    }, [wrapperRef.current, selectedRef === null || selectedRef === void 0 ? void 0 : selectedRef.current, narrow, tabs, rtl]);
    function handleScroll(e) {
        const target = e.currentTarget;
        if (target.scrollWidth - target.scrollLeft === target.clientWidth) {
            setEndOfScroll(true);
        }
        else {
            setEndOfScroll(false);
        }
    }
    function toggleBottomSheet() {
        setShowBottomSheet(!showBottomSheet);
        setExpandClickFlag(false);
    }
    function onExpandItemClick(tab) {
        setExpandClickFlag(true);
        onChange(tab);
        setShowBottomSheet(false);
    }
    return (React__default['default'].createElement(styles.Wrapper, { id: id, ref: wrapperRef, rtl: rtl },
        React__default['default'].createElement(styles.InnerWrapper, null,
            React__default['default'].createElement(styles.TabsContainer, { ref: containerRef, "data-testid": props['data-testid'], "data-trackid": props['data-trackid'], "aria-label": "tabs", role: "tablist", onScroll: handleScroll },
                tabs.map((tab) => (React__default['default'].createElement(Tab.Tab, { key: tab.value, tab: tab, selected: tab.value === selectedTab.value, setSelectedRef: setSelectedRef, narrow: narrow, expandClickFlag: expandClickFlag, onChange: onChange, disabled: tab.disabled, testId: tab.testId, trackId: tab.trackId }))),
                React__default['default'].createElement(styles.TabIndicator, { width: indicatorValues.width, left: indicatorValues.left, brandColor: brandColor })),
            hasOverflow && !endOfScroll && showExpandButton && (React__default['default'].createElement(styles.ExpandWrapper, { onClick: toggleBottomSheet, minHeight: (_c = (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) !== null && _c !== void 0 ? _c : 0, left: (expandWrapperLeft && expandWrapperLeft - EXPAND_BTN_WIDTH) || 0 },
                React__default['default'].createElement(index.IconButton, { variant: "secondary", size: "small", icon: React__default['default'].createElement(MoreHorizontal['default'], null) })))),
        React__default['default'].createElement(OpenTabs.OpenTabs, { showBottomSheet: showBottomSheet, tabs: tabs, selectedTab: selectedTab, dismissText: dismissText, toggleBottomSheet: toggleBottomSheet, onExpandItemClick: onExpandItemClick })));
}

exports.Tabs = Tabs;
