import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
import Styles from "./Tabs.module.scss";
import { useOneUIConfig } from "../../context/OneUIProvider";
export var TabType;
(function (TabType) {
    /** A div that encovers the tab */
    TabType[TabType["FULL"] = 0] = "FULL";
    /** An underline */
    TabType[TabType["UNDERLINE"] = 1] = "UNDERLINE";
    /** A class is assigned to the selected tab */
    TabType[TabType["CLASS"] = 2] = "CLASS";
})(TabType || (TabType = {}));
/**
 * A component that displays a set of tabs for switching between different options or views.
 * Users can click on a tab to select it, and the component highlights the active choice.
 */
export default function Tabs(props) {
    const { options, selected, onSelect, itemClassName = "", className = "", type = TabType.UNDERLINE, } = props;
    const classes = useOneUIConfig("component.tabs", {});
    const selectedRef = useRef(null);
    const guideRef = useRef(null);
    useEffect(() => {
        if (props.type === TabType.CLASS)
            return;
        const guideStyle = guideRef.current.style;
        const currEl = selectedRef.current;
        guideStyle["opacity"] = currEl ? "1" : guideStyle["opacity"];
        guideStyle["width"] = currEl ? currEl.clientWidth + "px" : "0px";
        guideStyle["left"] = currEl
            ? currEl.offsetLeft + "px"
            : guideStyle["left"] || "initial";
        if (type === TabType.FULL) {
            guideStyle["height"] = currEl ? currEl.clientHeight + "px" : "";
            guideStyle["top"] = currEl
                ? currEl.offsetTop + "px"
                : guideStyle["top"] || "initial";
        }
        else {
            guideStyle["top"] = currEl
                ? currEl.offsetTop + currEl.clientHeight + "px"
                : guideStyle["top"] || "initial";
        }
    }, [selected]);
    useEffect(() => {
        if (props.type === TabType.CLASS)
            return;
        guideRef.current.classList.add(Styles.enableTransition);
    }, []);
    const tabNativeCls = TabType[type] in Styles ? Styles[TabType[type]] : "";
    return (_jsx(_Fragment, { children: _jsxs("div", { className: `${Styles.container} ${className} ${tabNativeCls} ${classes.container}`, children: [options.map((o) => (_jsx("div", { ref: selected === o.id ? selectedRef : undefined, onClick: () => onSelect(o.id), className: `${selected === o.id ? Styles.selected : ""} ${itemClassName} ${props.type === TabType.CLASS && selected === o.id
                        ? props.selectedClass
                        : ""} ${classes.item}`, "data-testid": "tab-option", children: o.label }, o.id))), TabType.CLASS !== props.type && (_jsx("div", { ref: guideRef, className: Styles.guide, "data-testid": "tab-guide" }))] }) }));
}
//# sourceMappingURL=Tabs.js.map