import { __assign, __read } from "tslib";
import * as React from 'react';
import * as PropTypes from 'prop-types';
import classNames from '../../utils/classnames';
export default function ScrollView(_a) {
    var _b;
    var id = _a.id, scrollY = _a.scrollY, scrollX = _a.scrollX, style = _a.style, scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft, scrollIntoView = _a.scrollIntoView, className = _a.className, children = _a.children, _c = _a.upperThreshold, upperThreshold = _c === void 0 ? 50 : _c, _d = _a.lowerThreshold, lowerThreshold = _d === void 0 ? 50 : _d, domRef = _a.domRef, events = _a.events;
    var _e = __read(React.useState(false), 2), toUpper = _e[0], setToUpper = _e[1];
    var _f = __read(React.useState(false), 2), toLower = _f[0], setToLower = _f[1];
    var _g = __read(React.useState(0), 2), scrollLeftPos = _g[0], setScrollLeftPos = _g[1];
    var _h = __read(React.useState(0), 2), scrollTopPos = _h[0], setScrollTopPos = _h[1];
    var scrollViewRef = domRef || React.useRef(null);
    var handleOnScroll = function (e) {
        var detail = {
            scrollLeft: e.target.scrollLeft,
            scrollTop: e.target.scrollTop,
            scrollHeight: e.target.scrollHeight,
            scrollWidth: e.target.scrollWidth,
        };
        var deltaY = scrollY ? e.target.scrollTop - scrollTopPos : 0;
        var deltaX = scrollX ? e.target.scrollLeft - scrollLeftPos : 0;
        var delta;
        // console.log(">>>>", deltaY, deltaX,e.target.scrollLeft,e.target.scrollTop)
        // 横向滚动
        if (Math.abs(deltaX) > Math.abs(deltaY)) {
            delta = deltaX;
            setScrollLeftPos(e.target.scrollLeft);
            if (scrollX && e.target.scrollLeft <= upperThreshold) {
                delta < 0 && setToUpper(true);
            }
            else {
                setToUpper(false);
            }
            if (scrollX &&
                e.target.scrollLeft + e.target.offsetWidth + lowerThreshold >=
                    e.target.scrollWidth) {
                delta > 0 && setToLower(true);
            }
            else {
                setToLower(false);
            }
        }
        else {
            delta = deltaY;
            setScrollTopPos(e.target.scrollTop);
            if (scrollY && e.target.scrollTop <= upperThreshold) {
                delta < 0 && setToUpper(true);
            }
            else {
                setToUpper(false);
            }
            if (scrollY &&
                e.target.scrollTop + e.target.offsetHeight + lowerThreshold >=
                    e.target.scrollHeight) {
                delta > 0 && setToLower(true);
            }
            else {
                setToLower(false);
            }
        }
        // console.log("delta", deltaY, deltaX
        events.scroll(detail, { originEvent: e });
    };
    React.useEffect(function () {
        // @ts-ignore
        scrollViewRef.current.scrollTop = scrollTop;
    }, [scrollTop]);
    React.useEffect(function () {
        // @ts-ignore
        scrollViewRef.current.scrollLeft = scrollLeft;
    }, [scrollLeft]);
    React.useEffect(function () {
        toUpper && events.scrolltoupper();
    }, [toUpper]);
    React.useEffect(function () {
        toLower && events.scrolltolower();
    }, [toLower]);
    React.useEffect(function () {
        if (scrollIntoView) {
            var children_1 = scrollViewRef.current.children;
            var item = Array.from(children_1).find(function (item) { return item && item.id === scrollIntoView; });
            scrollY && (scrollViewRef.current.scrollTop = item.offsetTop);
            scrollX && (scrollViewRef.current.scrollLeft = item.offsetLeft);
            // console.log('children', children, item)
        }
    }, [scrollIntoView]);
    var webStyles = __assign({ position: 'relative', width: '100%', height: '100%', 
        // whiteSpace: scroll === 'y' ? 'normal' : 'nowrap',
        overflowX: "" + (scrollX ? 'auto' : 'hidden'), overflowY: "" + (scrollY ? 'auto' : 'hidden') }, style);
    var cls = classNames((_b = {
            'weda-ui': true,
            'g-scroll-view': true
        },
        _b[className] = className,
        _b));
    return (React.createElement("div", { id: id, style: webStyles, ref: scrollViewRef, className: cls, onScrollCapture: handleOnScroll }, children));
}
ScrollView.propTypes = {
    scrollX: PropTypes.bool,
    scrollY: PropTypes.bool,
    scrollTop: PropTypes.number,
    scrollLeft: PropTypes.number,
    scrollIntoView: PropTypes.string,
    upperThreshold: PropTypes.number,
    lowerThreshold: PropTypes.number,
    domRef: PropTypes.any,
    children: PropTypes.any,
    id: PropTypes.string,
    className: PropTypes.string,
    style: PropTypes.string,
    events: PropTypes.objectOf(PropTypes.func),
};
ScrollView.defaultProps = {
    scrollX: false,
    scrollY: true,
    upperThreshold: 50,
    lowerThreshold: 50,
    events: {},
};
//# sourceMappingURL=index.js.map