import React, { useCallback, useContext, useEffect, useState } from 'react';
import classNames from 'classnames';
import raf from 'raf';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
var easeInOutCubic = function (t, b, c, d) {
    var cc = c - b;
    t /= d / 2;
    if (t < 1) {
        return (cc / 2) * t * t * t + b;
    }
    else {
        return (cc / 2) * ((t -= 2) * t * t + 2) + b;
    }
};
var BackTop = function (props) {
    var _a = props.visibilityHeight, visibilityHeight = _a === void 0 ? 300 : _a, _b = props.target, target = _b === void 0 ? function () { return window; } : _b, customisedCls = props.prefixCls, onClick = props.onClick, className = props.className, style = props.style, children = props.children;
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('back-top', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className);
    var _c = useState(true), visible = _c[0], setVisible = _c[1];
    var getDistanceFromTop = useCallback(function () {
        var targetNode = target();
        if (targetNode === window) {
            return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
        }
        return targetNode.scrollTop;
    }, [target]);
    var setScrollToTop = function (distance) {
        var targetNode = target();
        if (targetNode === window) {
            document.body.scrollTop = distance;
            document.documentElement.scrollTop = distance;
        }
        else {
            targetNode.scrollTop = distance;
        }
    };
    var scrollToTop = function (e) {
        var scrollTop = getDistanceFromTop();
        var startTime = Date.now();
        var step = function () {
            var timestamp = Date.now();
            var time = timestamp - startTime;
            setScrollToTop(easeInOutCubic(time, scrollTop, 0, 450));
            if (time < 450) {
                raf(step);
            }
            else {
                setScrollToTop(0);
            }
        };
        raf(step);
        onClick && onClick(e);
    };
    var handleOnScroll = useCallback(function () {
        if (getDistanceFromTop() > visibilityHeight) {
            !visible && setVisible(true);
        }
        else if (visible) {
            setVisible(false);
        }
    }, [getDistanceFromTop, visible, visibilityHeight]);
    useEffect(function () {
        var targetNode = target();
        targetNode.addEventListener('scroll', handleOnScroll);
        handleOnScroll();
        return function () {
            targetNode.removeEventListener('scroll', handleOnScroll);
        };
    }, [target, handleOnScroll]);
    if (visible) {
        return (React.createElement("div", { className: cls, style: style, onClick: scrollToTop }, children || (React.createElement("svg", { viewBox: "0 0 1024 1024", width: "18", height: "18" },
            React.createElement("path", { d: "M563.2 379.757048 563.2 972.755371C563.2 1001.056998 540.219441 1024 512 1024\n                483.723021 1024 460.8 1001.019181 460.8 972.755371L460.8 379.740842 272.093167\n                568.447675C252.13208 588.408762 219.700711 588.340711 199.746554 568.386554 179.75171\n                548.39171 179.766716 515.958656 199.685432 496.039941L473.973319 221.752055C483.353204\n                211.343458 496.929524 204.8 512 204.8 527.198527 204.8 540.850334 211.438998 550.227358\n                221.968936L824.32552 496.0671C844.244236 515.985815 844.259243 548.418868 824.2644\n                568.413712 804.310241 588.367871 771.878874 588.435921 751.917786 568.474834L563.2\n                379.757048ZM0 51.2C0 22.923021 22.82342 0 51.130666 0L972.869334 0C1001.108021 0 1024\n                22.980559 1024 51.2 1024 79.476979 1001.17658 102.4 972.869334 102.4L51.130666\n                102.4C22.891979 102.4 0 79.419441 0 51.2Z", fill: "#ffffff" })))));
    }
    return null;
};
export default BackTop;
//# sourceMappingURL=index.js.map