import React from "react";
import { ReactNode, useCallback, useEffect, useRef } from "react";
import './vertical-resizer.less'
interface Iprops {
    children?: ReactNode                         //子节点
    defaultHeight?: number                       //默认高度
    onHeightChange?: (value: number) => void     //拖动高度改变的回调函数
    onHeightChangeDown?: (value: number) => void //拖动高度改变完成时，鼠标松开后的回调函数
    color?: string                               //垂直高度调整器的颜色
}
export default function VerticalResizer(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?.getBoundingClientRect();
        // let containerRect = containerDom?.getBoundingClientRect();
        containerDom.style.height = `${props.defaultHeight || 300}px`
        if (props.onHeightChange) props.onHeightChange(props.defaultHeight || 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!');
        };
        dom.getBoundingClientRect();
        // const rect = dom.getBoundingClientRect();
        let containerDom = containerRef.current;
        let containerRect = containerDom?.getBoundingClientRect();
        let value = containerRect.height - event.movementY;
        containerDom.style.height = `${value}px`
    
        


        if (props.onHeightChange) props.onHeightChange(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.onHeightChangeDown) props.onHeightChangeDown(props.defaultHeight);
		dom.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
		dom.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
    }, [])

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

    )
}