/**
 * amis-ui v6.14.0-beta.1
 * Copyright 2018-2025 fex
 */

import { __read, __assign } from 'tslib';
import React__default, { forwardRef, useEffect } from 'react';
import { themeable } from 'amis-core';
import useSetState from '../hooks/use-set-state.js';
import useTouch from '../hooks/use-touch.js';
import 'lodash/pick';
import useOnScreen from '../hooks/use-on-screen.js';
import { Spinner } from './Spinner.js';

/**
 * @file PullRefresh.tsx
 * @description 下拉刷新
 * @author hongyang03
 */
var defaultProps = {
    successDuration: 0,
    loadingDuration: 0,
    direction: 'down',
    showIcon: true,
    showText: true,
    iconType: 'loading-outline'
};
var defaultHeaderHeight = 28;
var PullRefresh = forwardRef(function (props, ref) {
    var _a, _b, _c, _d, _e, _f;
    var cx = props.classnames, __ = props.translate, children = props.children, successDuration = props.successDuration, loadingDuration = props.loadingDuration, direction = props.direction, completed = props.completed, showIcon = props.showIcon, showText = props.showText, iconType = props.iconType, color = props.color, contentText = props.contentText;
    var refreshText = {
        normalText: (_a = contentText === null || contentText === void 0 ? void 0 : contentText.normalText) !== null && _a !== void 0 ? _a : __('pullRefresh.normalText'),
        pullingText: (_b = contentText === null || contentText === void 0 ? void 0 : contentText.pullingText) !== null && _b !== void 0 ? _b : __('pullRefresh.pullingText'),
        loosingText: (_c = contentText === null || contentText === void 0 ? void 0 : contentText.loosingText) !== null && _c !== void 0 ? _c : __('pullRefresh.loosingText'),
        loadingText: (_d = contentText === null || contentText === void 0 ? void 0 : contentText.loadingText) !== null && _d !== void 0 ? _d : __('pullRefresh.loadingText'),
        successText: (_e = contentText === null || contentText === void 0 ? void 0 : contentText.successText) !== null && _e !== void 0 ? _e : __('pullRefresh.successText'),
        completedText: (_f = contentText === null || contentText === void 0 ? void 0 : contentText.completedText) !== null && _f !== void 0 ? _f : __('pullRefresh.completedText')
    };
    var touch = useTouch();
    var loadingRef = React__default.useRef(null);
    // 当占位文字在屏幕内时，需要刷新
    var needRefresh = useOnScreen(loadingRef);
    useEffect(function () {
        if (props.loading === false) {
            loadSuccess();
        }
    }, [props.loading]);
    var _g = __read(useSetState({
        status: 'normal',
        offsetY: 0
    }), 2), state = _g[0], updateState = _g[1];
    var isTouchable = function () {
        return (!completed &&
            needRefresh &&
            !props.disabled &&
            state.status !== 'loading' &&
            state.status !== 'success');
    };
    var ease = function (distance) {
        var pullDistance = defaultHeaderHeight;
        if (distance > pullDistance) {
            if (distance < pullDistance * 2) {
                distance = pullDistance + (distance - pullDistance) / 2;
            }
            else {
                distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
            }
        }
        return Math.round(distance);
    };
    var setStatus = function (distance, isLoading) {
        var pullDistance = defaultHeaderHeight;
        var status = 'normal';
        if (isLoading) {
            status = 'loading';
        }
        else if (distance === 0) {
            status = 'normal';
        }
        else if (Math.abs(distance) < pullDistance) {
            status = 'pulling';
        }
        else {
            status = 'loosing';
        }
        updateState({ offsetY: distance, status: status });
    };
    var loadSuccess = function () {
        if (!successDuration) {
            setStatus(0);
            return;
        }
        updateState({ status: 'success' });
        setTimeout(function () {
            setStatus(0);
        }, successDuration);
    };
    var onTouchStart = function (event) {
        event.stopPropagation();
        if (isTouchable() && state.offsetY === 0) {
            touch.start(event);
            updateState({});
        }
    };
    var onTouchMove = function (event) {
        event.stopPropagation();
        if (isTouchable()) {
            touch.move(event);
            updateState({});
            if (touch.isVertical()) {
                if (direction === 'down' && touch.deltaY > 0) {
                    setStatus(ease(touch.deltaY));
                }
                else if (direction === 'up' && touch.deltaY < 0) {
                    setStatus(-1 * ease(-1 * touch.deltaY));
                }
            }
        }
        return false;
    };
    var onTouchEnd = function (event) {
        event.stopPropagation();
        if (isTouchable() && state.offsetY !== 0) {
            if (state.status === 'loosing') {
                if (loadingDuration) {
                    setStatus(defaultHeaderHeight, true);
                }
                else {
                    setStatus(0);
                }
                props.onRefresh && props.onRefresh();
            }
            else {
                setStatus(0);
            }
        }
    };
    var transformStyle = __assign({ transform: "translate3d(0, ".concat(state.offsetY, "px, 0)") }, (direction === 'down'
        ? {
            touchAction: 'none'
        }
        : {}));
    var getStatusText = function (status) {
        if (props.loading) {
            return refreshText.loadingText;
        }
        if (completed) {
            return refreshText.completedText;
        }
        return refreshText["".concat(status, "Text")];
    };
    var loadingDom = function (className) {
        return (React__default.createElement("div", { className: className, ref: loadingRef, style: color
                ? {
                    '--Spinner-color': color,
                    'color': color
                }
                : undefined },
            showIcon && props.loading && (React__default.createElement(Spinner, { show: true, icon: iconType, size: "sm", className: "PullRefresh-spinner", classnames: cx, classPrefix: props.classPrefix })),
            showText && getStatusText(state.status)));
    };
    return (React__default.createElement("div", { className: cx('PullRefresh'), onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, onTouchCancel: onTouchEnd },
        React__default.createElement("div", { className: cx('PullRefresh-wrap'), style: transformStyle },
            direction === 'down' ? loadingDom(cx('PullRefresh-header')) : null,
            children,
            direction === 'up' ? loadingDom(cx('PullRefresh-footer')) : null)));
});
PullRefresh.defaultProps = defaultProps;
var PullRefresh$1 = themeable(PullRefresh);

export { PullRefresh$1 as default };
