import React from "react";
import { ReactNode, useCallback, useEffect, useRef } from "react";
import './horizontal-resizer.less'
interface Iprops {
    children?: ReactNode                         //子节点
    defaultWidth?: number                       //默认宽度
    onWidthChange?: (value: number) => void     //拖动宽度改变的回调函数
    onWidthChangeDown?: (value: number) => void //拖动宽度改变完成时，鼠标松开后的回调函数
    color?: string                               //水平宽度调整器的颜色
}
export default function HorizontalResizer(props: Iprops) {
    const ref = useRef<HTMLDivElement>();
    const containerRef = useRef<HTMLDivElement>();
    useEffect(() => {

        let dom = ref.current;
    
        
        if (!!dom) {
            dom.addEventListener('pointerdown', onPointerDown);
        }
        let containerDom = containerRef.current;
        containerDom.style.width = `${props.defaultWidth || 300}px`
        if (props.onWidthChange) props.onWidthChange(props.defaultWidth || 300);
        return () => {
            dom?.removeEventListener('pointerdown', onPointerDown);
            dom?.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
            dom?.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
        }
    }, [])

    const onPointerDown = useCallback((event) => {
 
        
        if ( event.isPrimary === false ) return;
        let dom = ref.current;
        if (!dom) {
            console.error('resizer dom not initialize!');
        };
        dom.ownerDocument.addEventListener('pointermove', onPointerMove);
        dom.ownerDocument.addEventListener('pointerup', onPointerUp);
    }, [])

    const onPointerMove = useCallback((event) => {
        if ( event.isPrimary === false ) return;
        let dom = ref.current;
        if (!dom) {
            console.error('resizer dom not initialize!');
        };
        // const rect = dom.getBoundingClientRect();
        let containerDom = containerRef.current;
        let containerRect = containerDom?.getBoundingClientRect();
        let value = containerRect.width + event.movementX;
        containerDom.style.width = `${value}px`
    
        


        if (props.onWidthChange) props.onWidthChange(value);
        // const x = (document.body.offsetWidth - rect.right) - event.movementX;
        // dom.style.right = x + 'px';

        // document.getElementById('viewport').style.right = (x + rect.width) + 'px';
        // document.getElementById('sidebar').style.width = (x + rect.width) + 'px';



    }, [])

    const onPointerUp = useCallback((event) => {
		if ( event.isPrimary === false ) return;
        let dom = ref.current;
        if (!dom) {
            console.error('resizer dom not initialize!');
        };
        if (props.onWidthChangeDown) props.onWidthChangeDown(props.defaultWidth);
		dom.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
		dom.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
    }, [])

    return (
        <div className="common-horizontal-resizer-container" ref={containerRef}>
            <div className="content">
            {props.children}
            </div>
            <div className="resizer-bar" style={{backgroundColor: props.color || null}} ref={ref}></div>
        </div>

    )
}