import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { useRef, useState, useEffect } from "react";
import { CompanyViewTabs } from "../../../utils";
import "./style.scss";
import IconButton from "../../IconButton";
const CompanyViewTabsComponent = ({ tabs = CompanyViewTabs, activeCompanyViewTab = "Summary", onClick, dataCy, }) => {
    const tabsContainerRef = useRef(null);
    const tabRefs = useRef({});
    const [canScrollLeft, setCanScrollLeft] = useState(false);
    const [canScrollRight, setCanScrollRight] = useState(true);
    const getCompanyViewTabButtonClasses = (tabName, activeCompanyViewTab) => {
        return clsx({
            "companyViewTabsComponent-Button--Generic": true,
            "companyViewTabsComponent-Button--Selected": activeCompanyViewTab === tabName,
            "companyViewTabsComponent-Button--Unselected": activeCompanyViewTab !== 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",
                });
            }
        }
    };
    useEffect(() => {
        const checkScrollPosition = () => {
            if (tabsContainerRef.current) {
                const { scrollLeft, scrollWidth, clientWidth } = tabsContainerRef.current;
                setCanScrollLeft(scrollLeft > 0);
                setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
            }
        };
        checkScrollPosition();
        if (tabsContainerRef.current) {
            tabsContainerRef.current.addEventListener("scrollend", checkScrollPosition);
            return () => {
                tabsContainerRef.current?.removeEventListener("scrollend", checkScrollPosition);
            };
        }
    }, []);
    useEffect(() => {
        const activeTabRef = tabRefs.current[activeCompanyViewTab];
        if (activeTabRef && tabsContainerRef.current) {
            activeTabRef.scrollIntoView({
                behavior: "smooth",
                block: "nearest",
                inline: "center",
            });
        }
    }, [activeCompanyViewTab]);
    return (_jsxs("div", { className: "companyViewTabsComponent--Container", children: [canScrollLeft && (_jsx(IconButton, { onClick: () => handleScroll("left"), iconType: "chevronLeft", sizeVariant: "xs", className: clsx("scrollButton", "left"), variant: "tertiary" })), _jsx("div", { ref: tabsContainerRef, className: "companyViewTabsComponent--Generic", children: tabs.map((entity, key) => (_jsx("button", { ref: (el) => {
                        if (el) {
                            tabRefs.current[entity.tabName] = el;
                        }
                    }, onClick: () => onClick(entity.tabName), className: getCompanyViewTabButtonClasses(entity.tabName, activeCompanyViewTab), "data-cy": `${dataCy}-${entity.tabName
                        .toLowerCase()
                        .replace(/\s+/g, "-")}`, children: entity.tabName.toUpperCase() }, key))) }), canScrollRight && (_jsx(IconButton, { onClick: () => handleScroll("right"), iconType: "chevronRight", sizeVariant: "xs", className: clsx("scrollButton", "right"), variant: "tertiary" }))] }));
};
export default CompanyViewTabsComponent;
