"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollbarsVirtualList = exports.Scrollbars = void 0;
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
const react_1 = tslib_1.__importStar(require("react"));
const ide_utils_1 = require("@opensumi/ide-utils");
const react_custom_scrollbars_2_1 = require("@opensumi/react-custom-scrollbars-2");
require("./styles.less");
const Scrollbars = ({ onScroll, onUpdate, forwardedRef, style, children, className, onReachBottom, tabBarMode, thumbSize = 5, hiddenVertical, hiddenHorizontal, universal = false, }) => {
    const disposableCollection = (0, react_1.useRef)(new ide_utils_1.DisposableCollection());
    const scrollerRef = (0, react_1.useRef)();
    const refSetter = (0, react_1.useCallback)((scrollbarsRef) => {
        if (scrollbarsRef) {
            scrollerRef.current = scrollbarsRef.view;
            if (forwardedRef) {
                if (typeof forwardedRef === 'function') {
                    forwardedRef(scrollbarsRef.view);
                }
                else {
                    forwardedRef.current = scrollbarsRef.view;
                }
            }
        }
        else {
            if (forwardedRef && typeof forwardedRef === 'function') {
                forwardedRef(null);
            }
        }
    }, []);
    const verticalShadowRef = (0, react_1.useRef)();
    const horizontalShadowRef = (0, react_1.useRef)();
    const handleReachBottom = (0, react_1.useCallback)((values) => {
        if (!values) {
            return;
        }
        const { scrollTop, scrollHeight, clientHeight } = values;
        if (scrollHeight === 0 && clientHeight === 0) {
            return;
        }
        const pad = 100;
        const t = (scrollTop + pad) / (scrollHeight - clientHeight);
        if (t > 1) {
            onReachBottom && onReachBottom();
        }
    }, [onReachBottom]);
    const handleUpdate = (0, react_1.useCallback)((0, throttle_1.default)((values) => {
        if (!values) {
            return;
        }
        const { scrollTop, scrollLeft } = values;
        const shadowTopOpacity = (1 / 20) * Math.min(scrollTop, 20);
        const shadowLeftOpacity = (1 / 20) * Math.min(scrollLeft, 20);
        if (verticalShadowRef.current) {
            verticalShadowRef.current.style.opacity = String(shadowTopOpacity);
        }
        if (horizontalShadowRef.current) {
            horizontalShadowRef.current.style.opacity = String(shadowLeftOpacity);
        }
        handleReachBottom(values);
        onUpdate && onUpdate(values);
    }, 100), [onUpdate, handleReachBottom, verticalShadowRef.current, horizontalShadowRef.current]);
    (0, react_1.useEffect)(() => {
        const onMouseWheel = (e) => {
            if (!scrollerRef.current) {
                return;
            }
            e.preventDefault();
            e.stopPropagation();
            if (scrollerRef.current.clientHeight >= scrollerRef.current.scrollHeight) {
                if (e.deltaY !== 0) {
                    scrollerRef.current.scrollLeft += e.deltaY;
                }
                if (e.deltaX !== 0) {
                    scrollerRef.current.scrollLeft += e.deltaX;
                }
            }
        };
        if (tabBarMode && scrollerRef.current) {
            scrollerRef.current.addEventListener('wheel', onMouseWheel);
        }
        return () => {
            var _a;
            (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', onMouseWheel);
        };
    }, [scrollerRef.current, tabBarMode]);
    // clear listeners
    (0, react_1.useEffect)(() => () => disposableCollection.current.dispose(), []);
    return (react_1.default.createElement(react_custom_scrollbars_2_1.Scrollbars, { ref: refSetter, style: { ...style, overflow: 'hidden' }, className: (0, classnames_1.default)(className, 'kt-scrollbar'), onUpdate: handleUpdate, onScroll: onScroll, universal: universal, renderTrackHorizontal: ({ style, ...props }) => {
            const newStyle = { ...style, height: thumbSize, left: 0, right: 0, bottom: 1 };
            if (hiddenHorizontal) {
                newStyle.display = 'none';
            }
            return react_1.default.createElement("div", { ...props, style: newStyle });
        }, renderTrackVertical: ({ style, ...props }) => {
            const newStyle = { ...style, width: thumbSize, top: 0, right: 1, bottom: 0 };
            if (hiddenVertical) {
                newStyle.display = 'none';
            }
            return react_1.default.createElement("div", { ...props, style: newStyle });
        }, renderThumbVertical: ({ style, className, ...props }) => {
            const newStyle = { ...style, width: thumbSize };
            if (hiddenVertical) {
                newStyle.display = 'none';
            }
            return react_1.default.createElement("div", { ...props, style: newStyle, className: (0, classnames_1.default)(className, 'scrollbar-thumb-vertical') });
        }, renderThumbHorizontal: ({ style, className, ...props }) => {
            const newStyle = { ...style, height: thumbSize, display: 'none' };
            if (hiddenHorizontal) {
                newStyle.display = 'none';
            }
            return react_1.default.createElement("div", { ...props, style: newStyle, className: (0, classnames_1.default)(className, 'scrollbar-thumb-horizontal') });
        } },
        react_1.default.createElement("div", { ref: (ref) => {
                verticalShadowRef.current = ref;
            }, className: 'scrollbar-decoration-vertical' }),
        react_1.default.createElement("div", { ref: (ref) => {
                horizontalShadowRef.current = ref;
            }, className: 'scrollbar-decoration-horizontal' }),
        children));
};
exports.Scrollbars = Scrollbars;
exports.Scrollbars.displayName = 'CustomScrollbars';
exports.ScrollbarsVirtualList = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(exports.Scrollbars, { ...props, thumbSize: 10, forwardedRef: ref })));
exports.ScrollbarsVirtualList.displayName = 'ScrollbarsVirtualList';
//# sourceMappingURL=index.js.map