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

import React__default, { useMemo, useCallback } from 'react';
import { themeable } from 'amis-core';
import useClickAway from '../hooks/use-click-away.js';

/**
 * @file Slider 滑动条
 * @author qhy
 * @date 2025/01/21
 */
function Slider(props) {
    var cx = props.classnames, mobileUI = props.mobileUI, bodyWidth = props.bodyWidth, showLeft = props.showLeft, showRight = props.showRight, _a = props.canSwitch, canSwitch = _a === void 0 ? true : _a, onLeftShow = props.onLeftShow, onRightShow = props.onRightShow, onLeftHide = props.onLeftHide, onRightHide = props.onRightHide;
    var sliderRef = React__default.useRef(null);
    var leftRef = React__default.useRef(null);
    var rightRef = React__default.useRef(null);
    var leftShow = React__default.useRef(false);
    var rightShow = React__default.useRef(false);
    var isMouseDown = React__default.useRef(false);
    var direction = React__default.useRef(null);
    var startX = React__default.useRef(0);
    var doc = React__default.useRef(document);
    var leftRightDefaultWidth = useMemo(function () { return (100 - parseInt(bodyWidth || '60')) / 2; }, [bodyWidth]);
    function handleStart(e) {
        var _a;
        if (mobileUI && canSwitch && !showLeft && !showRight) {
            isMouseDown.current = true;
            if ((_a = e.touches) === null || _a === void 0 ? void 0 : _a[0]) {
                startX.current = e.touches[0].clientX;
                doc.current.addEventListener('touchend', handleUp);
            }
            else {
                startX.current = e.clientX;
                doc.current.addEventListener('mouseup', handleUp);
            }
        }
    }
    function handleMove(e) {
        var _a, _b, _c, _d, _e;
        if (!isMouseDown.current) {
            return;
        }
        var currentX = 0;
        if ((_a = e.changedTouches) === null || _a === void 0 ? void 0 : _a[0]) {
            currentX = e.changedTouches[0].clientX;
        }
        else {
            currentX = e.clientX;
        }
        var currentDirection = currentX < startX.current ? 'left' : 'right';
        var leftWidth = Number(((_b = leftRef.current) === null || _b === void 0 ? void 0 : _b.style.width.replace('%', '')) || 0);
        var rightWidth = Number(((_c = rightRef.current) === null || _c === void 0 ? void 0 : _c.style.width.replace('%', '')) || 0);
        if (currentDirection === 'right') {
            leftWidth = Math.min(leftWidth + 1, leftRightDefaultWidth);
            if (rightWidth > 0) {
                rightWidth = Math.max(rightWidth - 1, 0);
            }
        }
        else {
            rightWidth = Math.min(rightWidth + 1, leftRightDefaultWidth);
            if (leftWidth > 0) {
                leftWidth = Math.max(leftWidth - 1, 0);
            }
        }
        direction.current = currentDirection;
        (_d = leftRef.current) === null || _d === void 0 ? void 0 : _d.style.setProperty('width', leftWidth + '%');
        (_e = rightRef.current) === null || _e === void 0 ? void 0 : _e.style.setProperty('width', rightWidth + '%');
    }
    function handleUp(e) {
        var _a;
        if (!mobileUI || !isMouseDown.current) {
            return;
        }
        isMouseDown.current = false;
        var currentX = 0;
        if ((_a = e.changedTouches) === null || _a === void 0 ? void 0 : _a[0]) {
            currentX = e.changedTouches[0].clientX;
            doc.current.removeEventListener('touchend', handleUp);
        }
        else {
            currentX = e.clientX;
            doc.current.removeEventListener('mouseup', handleUp);
        }
        var isMove = Math.abs(currentX - startX.current) > 10;
        var leftWidth = isMove && direction.current === 'right' ? leftRightDefaultWidth : 0;
        var rightWidth = isMove && direction.current === 'left' ? leftRightDefaultWidth : 0;
        setWidth(leftWidth, rightWidth);
    }
    function setWidth(left, right) {
        var _a, _b;
        if (left === 0 && leftShow.current) {
            leftShow.current = false;
            onLeftHide && onLeftHide();
        }
        if (right === 0 && rightShow.current) {
            rightShow.current = false;
            onRightHide && onRightHide();
        }
        if (left === leftRightDefaultWidth) {
            leftShow.current = true;
            onLeftShow && onLeftShow();
        }
        if (right === leftRightDefaultWidth) {
            rightShow.current = true;
            onRightShow && onRightShow();
        }
        (_a = leftRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('width', left + '%');
        (_b = rightRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('width', right + '%');
    }
    var reset = useCallback(function (e) {
        if (!sliderRef.current) {
            return;
        }
        if (!sliderRef.current.contains(e.target) &&
            (leftShow.current || rightShow.current)) {
            setWidth(0, 0);
        }
    }, []);
    // 点击外部时，重置滑动条
    useClickAway(sliderRef, reset, doc.current, ['mouseup', 'touchend']);
    return (React__default.createElement("div", { className: cx('Slider'), ref: sliderRef }, mobileUI ? (React__default.createElement(React__default.Fragment, null,
        props.left && (React__default.createElement("div", { className: cx('Slider-LeftContainer'), ref: leftRef, style: {
                width: showLeft ? leftRightDefaultWidth + '%' : '0%'
            } }, props.left)),
        React__default.createElement("div", { className: cx('Slider-BodyContainer'), onMouseDown: handleStart, onMouseMove: handleMove, onTouchStart: handleStart, onTouchMove: handleMove }, props.body),
        props.right && (React__default.createElement("div", { className: cx('Slider-RightContainer'), ref: rightRef, style: {
                width: showRight ? leftRightDefaultWidth + '%' : '0%'
            } }, props.right)))) : (React__default.createElement(React__default.Fragment, null,
        React__default.createElement("div", { className: cx('Slider-BodyContainer'), style: {
                width: bodyWidth ? bodyWidth : '60%'
            } }, props.body),
        props.left && (React__default.createElement("div", { className: cx('Slider-LeftContainer') }, props.left)),
        props.right && (React__default.createElement("div", { className: cx('Slider-RightContainer') }, props.right))))));
}
var Slider$1 = themeable(Slider);

export { Slider$1 as default };
