import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState, useEffect } from "react";
import clsx from "clsx";
import { PersonViewTabs } from "../../../utils";
import IconButton from "../../IconButton";
import "./style.scss";
function PersonViewTabsComponent({ tabs = PersonViewTabs, activePersonViewTab = "Summary", onClick, dataCy, }) {
    const tabsContainerRef = useRef(null);
    const tabRefs = useRef({});
    const [canScrollLeft, setCanScrollLeft] = useState(false);
    const [canScrollRight, setCanScrollRight] = useState(true);
    const getPersonViewTabButtonClasses = (tabName, activePersonViewTab) => {
        return clsx({
            "personViewTabsComponent-Button--Generic": true,
            "personViewTabsComponent-Button--Selected": activePersonViewTab === tabName,
            "personViewTabsComponent-Button--Unselected": activePersonViewTab !== tabName,
        });
    };
    const handleScroll = (direction) => {
        if (tabsContainerRef.current) {
            const { scrollWidth, clientWidth, scrollLeft } = tabsContainerRef.current;
            if (direction === "left") {
                tabsContainerRef.current.scrollBy({
                    left: -scrollLeft,
                    behavior: "smooth",
                });
            }
            else {
                const scrollRemaining = scrollWidth - scrollLeft - clientWidth;
                tabsContainerRef.current.scrollBy({
                    left: scrollRemaining,
                    behavior: "smooth",
                });
            }
        }
    };
    const checkScrollButtons = () => {
        if (tabsContainerRef.current) {
            const { scrollLeft, scrollWidth, clientWidth } = tabsContainerRef.current;
            setCanScrollLeft(scrollLeft > 0);
            setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
        }
    };
    useEffect(() => {
        checkScrollButtons();
        const container = tabsContainerRef.current;
        if (container) {
            container.addEventListener("scroll", checkScrollButtons);
            return () => container.removeEventListener("scroll", checkScrollButtons);
        }
    }, []);
    useEffect(() => {
        checkScrollButtons();
    }, [tabs]);
    return (_jsxs("div", { className: "personViewTabsComponent--Container", children: [canScrollLeft && (_jsx(IconButton, { onClick: () => handleScroll("left"), iconType: "chevronLeft", sizeVariant: "xs", className: clsx("scrollButton", "left"), variant: "tertiary" })), _jsx("div", { ref: tabsContainerRef, className: "personViewTabsComponent--Generic", children: tabs.map((entity, key) => {
                    return (_jsxs("button", { ref: (el) => {
                            if (el) {
                                tabRefs.current[entity.tabName] = el;
                            }
                        }, onClick: () => onClick(entity.tabName), className: getPersonViewTabButtonClasses(entity.tabName, activePersonViewTab), "data-cy": `${dataCy}-${entity.tabName
                            .toLowerCase()
                            .replace(/\s+/g, "-")}}`, children: [!!entity.badge &&
                                entity.badgePosition !== "right" &&
                                entity.badge, entity.tabName.toUpperCase(), !!entity.badge &&
                                entity.badgePosition === "right" &&
                                entity.badge] }, key));
                }) }), canScrollRight && (_jsx(IconButton, { onClick: () => handleScroll("right"), iconType: "chevronRight", sizeVariant: "xs", className: clsx("scrollButton", "right"), variant: "tertiary" }))] }));
}
export default PersonViewTabsComponent;
