import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Flex, Icon, IconButton, Tab, TabList, TabPanel, TabPanels, Tabs, Text, } from "@chakra-ui/react";
import { ChevronLeft, ChevronRight } from "@feedloop/icon";
import React from "react";
import iconsList from "./iconsList";
const TabComponent = (props) => {
    var _a, _b;
    const backgroundStyle = {
        bg: "surface.900",
        shadow: "none",
    };
    const tabKeys = React.useMemo(() => {
        return React.Children.toArray(props.children).map((child) => {
            var _a, _b;
            return (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.component;
        });
    }, [props.children]);
    const components = React.useMemo(() => {
        return tabKeys.map((key) => {
            return props.app.maps.component[key];
        });
    }, [tabKeys, props.app.maps.component]);
    const ref = React.useRef(null);
    const [displayScroll, setDisplayScroll] = React.useState({
        start: false,
        end: false,
    });
    const scroll = (scrollValue, { animation = true } = {}) => {
        ref.current.scrollLeft = scrollValue;
    };
    const moveTabsScroll = (delta) => {
        var _a;
        const scrollValue = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + delta;
        scroll(scrollValue);
    };
    const getScrollSize = () => {
        var _a;
        const containerSize = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
        let totalSize = 0;
        const children = Array.from(ref.current.children);
        for (let i = 0; i < children.length; i += 1) {
            const tab = children[i];
            if (totalSize + tab.clientWidth > containerSize) {
                if (i === 0) {
                    totalSize = containerSize;
                }
                break;
            }
            totalSize += tab.clientWidth;
        }
        return totalSize;
    };
    const handleStartScrollClick = () => {
        moveTabsScroll(-1 * getScrollSize());
    };
    const handleEndScrollClick = () => {
        moveTabsScroll(getScrollSize());
    };
    const updateDisplayScroll = React.useCallback(() => {
        const { scrollLeft, scrollWidth, clientWidth } = ref.current;
        if (scrollWidth > 0 && clientWidth > 0) {
            setDisplayScroll({
                start: scrollLeft > 1,
                end: scrollLeft + clientWidth < scrollWidth - 1,
            });
        }
    }, []);
    React.useEffect(() => {
        if (ref.current) {
            updateDisplayScroll();
            ref.current.addEventListener("scroll", (e) => {
                updateDisplayScroll();
            });
            return () => {
                var _a;
                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", () => { });
            };
        }
    }, [(_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollWidth, (_b = ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth, props.children]);
    return (_jsxs(Tabs, Object.assign({ maxW: "100%", isFitted: props.properties.length === "1", variant: "unstyled", colorScheme: "linkedin", padding: "1rem", minH: props.children[0] !== undefined ? undefined : "50px", rounded: "lg", flex: 1 }, backgroundStyle, { orientation: props.properties.layout }, { children: [props.properties.layout === "vertical" && (_jsx(TabList, Object.assign({ borderWidth: props.properties.style === "unstyled"
                    ? "0px 0px 0px 0px"
                    : "0px 1px 0px 0px", borderColor: "#E7E7E7" }, { children: components.map((value, key) => (_jsx(Tab, Object.assign({ _selected: props.properties.style === "line"
                        ? { borderColor: "#0065FF", borderWidth: "0px 1px 0px 0px" }
                        : { color: "#0065FF", bg: "#E6F0FF", borderRadius: "4px" } }, { children: value.properties.title.length > 10
                        ? value.properties.title.substring(0, 7) + "..."
                        : value.properties.title }), key))) }))), props.properties.layout === "horizontal" && (_jsxs(Flex, Object.assign({ alignItems: "center" }, { children: [displayScroll.start && (_jsx(IconButton, { icon: _jsx(ChevronLeft, {}), "aria-label": "previous", bg: "transparent", color: "inherit", onClick: handleStartScrollClick, variant: "ghost" })), _jsx(Flex, Object.assign({ flex: 1, overflowY: "hidden", overflowX: "auto", sx: {
                            scrollbarWidth: "none",
                            "::-webkit-scrollbar": {
                                display: "none",
                            },
                        }, justifyContent: props.properties.alignment, borderWidth: props.properties.style === "line"
                            ? "0px 0px 1px 0px"
                            : "0px 0px 0px 0px", borderColor: "#E7E7E7", ref: ref }, { children: components.map((value, key) => (_jsxs(Tab, Object.assign({ _selected: props.properties.style === "unstyled"
                                ? { color: "#0065FF", bg: "#E6F0FF", borderRadius: "4px" }
                                : { borderColor: "#0065FF", borderWidth: "0px 0px 1px 0px" } }, { children: [value.properties.showLeadingIcon && (_jsx(Icon, { marginEnd: 1, as: iconsList[value.properties.leadingIcon] })), _jsx(Text, Object.assign({ noOfLines: 1, w: "max-content", maxW: "10rem !important" }, { children: value.properties.title }))] }), key))) })), displayScroll.end && (_jsx(IconButton, { icon: _jsx(ChevronRight, {}), "aria-label": "next", bg: "transparent", color: "inherit", onClick: handleEndScrollClick, variant: "ghost" }))] }))), _jsx(TabPanels, { children: React.Children.map(props.children, (tab, index) => (_jsx(TabPanel, Object.assign({ p: 4 }, { children: tab }), index))) })] })));
};
export default TabComponent;
//# sourceMappingURL=Tab.js.map