'use strict';

var tslib_es6 = require('./tslib.es6-2c2ed574.js');
var React = require('react');
var other = require('@hhgtech/icons/other');
var core = require('@mantine/core');
var index = require('./index-3d563586.js');
var index$1 = require('./index-a31ed3e1.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var useStyles = core.createStyles((theme, params) => {
    const { variant } = params;
    const gradientOverlay = {
        content: 'none',
        top: 0,
        bottom: 0,
        zIndex: 1,
        width: core.rem(56),
    };
    return Object.assign({}, (variant === 'inline' && {
        root: {},
        tabsList: {
            gap: core.rem(24),
            borderBottom: 'none',
            flexWrap: 'nowrap',
        },
        tab: {
            padding: `${core.rem(8)} 0`,
            color: theme.colors.gray[4],
            borderColor: 'transparent',
            borderBottomWidth: core.rem(2),
            marginBottom: core.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: core.rem(28),
            height: core.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 = tslib_es6.__rest(_a, ["variant", "value", "styles", "children", "dataList", "tabProps", "listProps", "panelProps", "TabComponentDisplay", "startPadding", "defaultValue"]);
    const { cx, classes } = useStyles({ variant }, { name: 'Tabs', styles });
    const listRef = React.useRef(null);
    const tabRef = React.useRef([]);
    const [activeTab, setActiveTab] = React.useState(defaultValue || ((_b = dataList === null || dataList === void 0 ? void 0 : dataList[0]) === null || _b === void 0 ? void 0 : _b.value));
    const [currentSlide, setCurrentSlide] = React.useState(0);
    const [disableNext, setDisableNext] = React.useState(false);
    const [disablePrevious, setDisablePrevious] = React.useState(true);
    const [scrollPosition, onScrollPositionChange] = React.useState({ x: 0, y: 0 });
    const viewport = React.useRef(null);
    const props = Object.assign({ defaultValue, classNames: classes }, (!children
        ? {
            value: activeTab,
            onTabChange: (v) => setActiveTab(v),
        }
        : {
            value,
        }));
    React.useEffect(() => {
        setActiveTab(value);
    }, [value]);
    React.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]);
    React.useEffect(() => {
        setCurrentSlide(dataList.findIndex((i) => i.value == activeTab));
    }, [activeTab]);
    React.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["default"].createElement(TabComponentDisplay, null, text)) : (React__default["default"].createElement(index$1.Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
    return (React__default["default"].createElement(core.Tabs, Object.assign({}, props, rest), children || (React__default["default"].createElement(React__default["default"].Fragment, null,
        React__default["default"].createElement(core.ScrollArea, { className: cx(classes.scrollArea, `${!disablePrevious ? 'prev-bg' : ''} ${!disableNext ? 'next-bg' : ''}`), scrollbarSize: 0, viewportRef: viewport, onScrollPositionChange: onScrollPositionChange },
            React__default["default"].createElement(core.Tabs.List, Object.assign({ className: classes.list, ref: listRef }, listProps), dataList.map((i, idx) => (React__default["default"].createElement(core.Tabs.Tab, Object.assign({ ref: (e) => (tabRef.current[idx] = e), className: classes.tab, key: String(i.value), value: String(i.value) }, tabProps),
                React__default["default"].createElement(TabTextComponent, Object.assign({}, i)))))),
            React__default["default"].createElement(index.Button, { className: cx(classes.btn, classes.prevBtn, disablePrevious ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide - 1 > -1 ? currentSlide - 1 : 0), leftIcon: React__default["default"].createElement(other.ArrowLeft, { size: 16 }) }),
            React__default["default"].createElement(index.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["default"].createElement(other.ArrowRight, { size: 16 }) })),
        dataList.map((i) => (React__default["default"].createElement(core.Tabs.Panel, Object.assign({ value: String(i.value), key: String(i.value) }, panelProps), i.content)))))));
};
const Tabs = _Tabs;
Tabs.List = core.Tabs.List;
Tabs.Tab = core.Tabs.Tab;
Tabs.Panel = core.Tabs.Panel;

exports.Tabs = Tabs;
