import { __assign, __rest } from "tslib";
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import Resizer from './resizer';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import Pane from './split-pane';
import warning from '../_utils/warning';
import { SplitContext } from './split-context';
var Split = function (props) {
    var _a;
    var _b = props.mode, mode = _b === void 0 ? 'vertical' : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.min, min = _d === void 0 ? 50 : _d, _e = props.max, max = _e === void 0 ? 50 : _e, _f = props.resizerSize, resizerSize = _f === void 0 ? 6 : _f, defaultSize = props.defaultSize, step = props.step, onChange = props.onChange, onDragStarted = props.onDragStarted, onDragFinished = props.onDragFinished, customisedCls = props.prefixCls, defaultStyle = props.style, resizerProps = props.resizerProps, className = props.className, children = props.children, otherProps = __rest(props, ["mode", "disabled", "min", "max", "resizerSize", "defaultSize", "step", "onChange", "onDragStarted", "onDragFinished", "prefixCls", "style", "resizerProps", "className", "children"]);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('split', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className, (_a = {},
        _a[prefixCls + "_" + mode] = mode,
        _a[prefixCls + "_disabled"] = disabled,
        _a));
    var _g = useState(undefined), pane1Size = _g[0], setPane1Size = _g[1];
    var wrapperRef = useRef(null);
    var paneRef = useRef(null);
    var isActiveMove = useRef(false);
    var lastPosition = useRef(0);
    var wrapper = wrapperRef.current;
    var getSizeNumber = useCallback(function (size) {
        if (typeof size === 'string') {
            if (wrapper) {
                var _a = wrapper.getBoundingClientRect(), width = _a.width, height = _a.height;
                return ((mode === 'vertical' ? width : height) * parseFloat(size)) / 100;
            }
        }
        else {
            return size;
        }
        return 0;
    }, [mode, wrapper]);
    var minSize = getSizeNumber(min);
    var maxSize = getSizeNumber(max);
    if (wrapper) {
        var _h = wrapper.getBoundingClientRect(), width = _h.width, height = _h.height;
        maxSize = (mode === 'vertical' ? width : height) - maxSize - resizerSize;
    }
    var resizerOnMouseDown = function (e) {
        isActiveMove.current = true;
        lastPosition.current = e[mode === 'vertical' ? 'clientX' : 'clientY'];
        onDragStarted && onDragStarted();
    };
    var onMouseMove = useCallback(function (e) {
        if (!disabled && isActiveMove.current) {
            var pane = paneRef.current;
            if (pane) {
                if (pane.getBoundingClientRect) {
                    var width = pane.getBoundingClientRect().width;
                    var height = pane.getBoundingClientRect().height;
                    var current = e[mode === 'vertical' ? 'clientX' : 'clientY'];
                    var size = mode === 'vertical' ? width : height;
                    var offset = lastPosition.current - current;
                    if (step) {
                        if (Math.abs(offset) < step) {
                            return;
                        }
                        offset = Math.round((offset / step) * step);
                    }
                    var newSize = size - offset;
                    var newPosition = lastPosition.current - offset;
                    if (newSize < minSize) {
                        newSize = minSize;
                    }
                    else if (newSize > maxSize) {
                        newSize = maxSize;
                    }
                    else {
                        lastPosition.current = newPosition;
                    }
                    !('size' in props) && setPane1Size(newSize);
                    onChange && onChange(newSize);
                }
            }
        }
    }, [props, disabled, maxSize, minSize, mode, onChange, step]);
    var onMouseUp = useCallback(function () {
        isActiveMove.current = false;
        onDragFinished && onDragFinished();
    }, [onDragFinished]);
    var style;
    if (mode === 'vertical') {
        style = __assign({}, defaultStyle);
    }
    else {
        style = __assign(__assign({}, defaultStyle), { minHeight: '100%', width: '100%' });
    }
    useEffect(function () {
        window.addEventListener('mousemove', onMouseMove);
        window.addEventListener('mouseup', onMouseUp);
        return function () {
            window.removeEventListener('mousemove', onMouseMove);
            window.removeEventListener('mouseup', onMouseUp);
        };
    }, [onMouseMove, onMouseUp]);
    useEffect(function () {
        var initialSize = getSizeNumber(props.size || defaultSize || minSize);
        setPane1Size(initialSize);
    }, [getSizeNumber, props.size, defaultSize, minSize]);
    useEffect(function () {
        if ('size' in props) {
            var size = getSizeNumber(props.size);
            setPane1Size(size);
        }
    }, [props, getSizeNumber]);
    warning(React.Children.count(children) > 2, 'There are more than 2 children inside Split.');
    var childrenList = React.Children.toArray(children).filter(function (child) { return child; });
    return (React.createElement(SplitContext.Provider, { value: { mode: mode } },
        React.createElement("div", __assign({ ref: wrapperRef }, otherProps, { className: cls, style: style }),
            React.createElement(Pane, { ref: paneRef, size: pane1Size, style: { flex: '0 0 auto' } }, childrenList[0]),
            React.createElement(Resizer, __assign({}, resizerProps, { size: resizerSize, mode: mode, onMouseDown: resizerOnMouseDown })),
            React.createElement(Pane, { style: { flex: '1 1 0%' } }, childrenList[1]))));
};
Split.displayName = 'Split';
export default Split;
//# sourceMappingURL=split.js.map