import { __rest } from '../../_virtual/_tslib.js';
import React__default, { useRef, useState, useEffect } from 'react';
import { Tab } from './components/Tab.js';
import MoreHorizontal from '../../icons/MoreHorizontal.js';
import { IconButton } from '../IconButton/index.js';
import { OpenTabs } from './components/OpenTabs.js';
import { Wrapper, InnerWrapper, TabsContainer, TabIndicator, ExpandWrapper } from './styles.js';

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 = __rest(_a, ["id", "tabs", "selectedTab", "brandColor", "narrow", "showExpandButton", "title", "dismissText", "onChange", "rtl"]);
    const wrapperRef = useRef(null);
    const containerRef = useRef(null);
    const [selectedRef, setSelectedRef] = useState();
    const [showBottomSheet, setShowBottomSheet] = useState(false);
    const [endOfScroll, setEndOfScroll] = useState(false);
    const [expandClickFlag, setExpandClickFlag] = useState(false);
    const [indicatorValues, setIndicatorValues] = useState({
        left: 0,
        width: 0,
    });
    const [hasOverflow, setHasOverflow] = useState(false);
    const expandWrapperLeft = containerRef && containerRef.current && containerRef.current.offsetWidth;
    useEffect(() => {
        const current = containerRef.current;
        if (containerRef && current) {
            setHasOverflow(current.offsetWidth < current.scrollWidth);
        }
    }, [containerRef.current, narrow, window.innerWidth]);
    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.createElement(Wrapper, { id: id, ref: wrapperRef, rtl: rtl },
        React__default.createElement(InnerWrapper, null,
            React__default.createElement(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.createElement(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.createElement(TabIndicator, { width: indicatorValues.width, left: indicatorValues.left, brandColor: brandColor })),
            hasOverflow && !endOfScroll && showExpandButton && (React__default.createElement(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.createElement(IconButton, { variant: "secondary", size: "small", icon: React__default.createElement(MoreHorizontal, null) })))),
        React__default.createElement(OpenTabs, { showBottomSheet: showBottomSheet, tabs: tabs, selectedTab: selectedTab, dismissText: dismissText, toggleBottomSheet: toggleBottomSheet, onExpandItemClick: onExpandItemClick })));
}

export { Tabs };
