import { _ as __rest } from './tslib.es6-ab63fd84.js';
import React__default, { useRef, useState, useEffect } from 'react';
import { ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
import { createStyles, rem, Tabs as Tabs$1, ScrollArea } from '@mantine/core';
import { B as Button } from './index-f71a880f.js';
import { T as Text } from './index-d0a1200e.js';

var useStyles = createStyles((theme, params) => {
    const { variant } = params;
    const gradientOverlay = {
        content: 'none',
        top: 0,
        bottom: 0,
        zIndex: 1,
        width: rem(56),
    };
    return Object.assign({}, (variant === 'inline' && {
        root: {},
        tabsList: {
            gap: rem(24),
            borderBottom: 'none',
            flexWrap: 'nowrap',
        },
        tab: {
            padding: `${rem(8)} 0`,
            color: theme.colors.gray[4],
            borderColor: 'transparent',
            borderBottomWidth: rem(2),
            marginBottom: rem(-1),
            transition: 'border 0.2s ease',
            ['&:hover']: {
                backgroundColor: 'initial',
                borderColor: 'transparent',
            },
            [`&[data-active='true']`]: {
                color: theme.fn.primaryColor(),
                borderColor: theme.fn.primaryColor(),
            },
        },
        tabRightSection: {},
        tabLabel: {},
        tabIcon: {},
        panel: {},
        scrollArea: {
            position: 'relative',
            '&.prev-bg': {
                '&:before': Object.assign(Object.assign({}, gradientOverlay), { content: '""', position: 'absolute', left: 0, background: 'linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)' }),
            },
            '&.next-bg': {
                '&:after': Object.assign(Object.assign({}, gradientOverlay), { content: '""', position: 'absolute', right: 0, background: 'linear-gradient(90deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%)' }),
            },
        },
        list: {
            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
        },
        btn: {
            position: 'absolute',
            top: '50%',
            zIndex: 2,
            transform: 'translate(0, -50%)',
            width: rem(28),
            height: rem(28),
            padding: 0,
            background: 'white',
            borderRadius: '50%',
            cursor: 'pointer',
            filter: 'drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04)) drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))',
            '.mantine-Button-icon': {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            },
            '&.disabled': {
                opacity: 0,
                zIndex: 0,
            },
        },
        prevBtn: {
            left: 0,
        },
        nextBtn: {
            right: 0,
        },
    }));
});

const _Tabs = (_a) => {
    var _b;
    var { variant = 'inline', value, styles, children, dataList = [], tabProps, listProps, panelProps, TabComponentDisplay, startPadding = 40, defaultValue } = _a, rest = __rest(_a, ["variant", "value", "styles", "children", "dataList", "tabProps", "listProps", "panelProps", "TabComponentDisplay", "startPadding", "defaultValue"]);
    const { cx, classes } = useStyles({ variant }, { name: 'Tabs', styles });
    const listRef = useRef(null);
    const tabRef = useRef([]);
    const [activeTab, setActiveTab] = useState(defaultValue || ((_b = dataList === null || dataList === void 0 ? void 0 : dataList[0]) === null || _b === void 0 ? void 0 : _b.value));
    const [currentSlide, setCurrentSlide] = useState(0);
    const [disableNext, setDisableNext] = useState(false);
    const [disablePrevious, setDisablePrevious] = useState(true);
    const [scrollPosition, onScrollPositionChange] = useState({ x: 0, y: 0 });
    const viewport = useRef(null);
    const props = Object.assign({ defaultValue, classNames: classes }, (!children
        ? {
            value: activeTab,
            onTabChange: (v) => setActiveTab(v),
        }
        : {
            value,
        }));
    useEffect(() => {
        setActiveTab(value);
    }, [value]);
    useEffect(() => {
        var _a, _b, _c;
        (_a = viewport.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
            left: ((_c = (_b = tabRef === null || tabRef === void 0 ? void 0 : tabRef.current) === null || _b === void 0 ? void 0 : _b[currentSlide]) === null || _c === void 0 ? void 0 : _c.offsetLeft) - startPadding,
            behavior: 'smooth',
        });
    }, [currentSlide]);
    useEffect(() => {
        setCurrentSlide(dataList.findIndex((i) => i.value == activeTab));
    }, [activeTab]);
    useEffect(() => {
        var _a, _b;
        setDisablePrevious(scrollPosition.x === 0);
        setDisableNext(((_a = viewport === null || viewport === void 0 ? void 0 : viewport.current) === null || _a === void 0 ? void 0 : _a.clientWidth) + scrollPosition.x ===
            ((_b = viewport === null || viewport === void 0 ? void 0 : viewport.current) === null || _b === void 0 ? void 0 : _b.scrollWidth));
    }, [scrollPosition]);
    const TabTextComponent = ({ text, dataEventCategory, dataEventAction, dataEventLabel, }) => TabComponentDisplay ? (React__default.createElement(TabComponentDisplay, null, text)) : (React__default.createElement(Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
    return (React__default.createElement(Tabs$1, Object.assign({}, props, rest), children || (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(ScrollArea, { className: cx(classes.scrollArea, `${!disablePrevious ? 'prev-bg' : ''} ${!disableNext ? 'next-bg' : ''}`), scrollbarSize: 0, viewportRef: viewport, onScrollPositionChange: onScrollPositionChange },
            React__default.createElement(Tabs$1.List, Object.assign({ className: classes.list, ref: listRef }, listProps), dataList.map((i, idx) => (React__default.createElement(Tabs$1.Tab, Object.assign({ ref: (e) => (tabRef.current[idx] = e), className: classes.tab, key: String(i.value), value: String(i.value) }, tabProps),
                React__default.createElement(TabTextComponent, Object.assign({}, i)))))),
            React__default.createElement(Button, { className: cx(classes.btn, classes.prevBtn, disablePrevious ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide - 1 > -1 ? currentSlide - 1 : 0), leftIcon: React__default.createElement(ArrowLeft, { size: 16 }) }),
            React__default.createElement(Button, { className: cx(classes.btn, classes.nextBtn, disableNext ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide + 1 < dataList.length - 1
                    ? currentSlide + 1
                    : dataList.length - 1), leftIcon: React__default.createElement(ArrowRight, { size: 16 }) })),
        dataList.map((i) => (React__default.createElement(Tabs$1.Panel, Object.assign({ value: String(i.value), key: String(i.value) }, panelProps), i.content)))))));
};
const Tabs = _Tabs;
Tabs.List = Tabs$1.List;
Tabs.Tab = Tabs$1.Tab;
Tabs.Panel = Tabs$1.Panel;

export { Tabs as T };
