import { useAsyncState } from "@/common/hooks";
import { IProps } from "@/common/Iprops.interface";
import BScroll from "@better-scroll/core";
import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
import MouseWheel from "@better-scroll/mouse-wheel";
import ScrollBar from "@better-scroll/scroll-bar";
import ObserveDOM from '@better-scroll/observe-dom'
import Pullup from '@better-scroll/pull-up'
import { ForwardedRef, forwardRef, ForwardRefRenderFunction, useCallback, useEffect, useMemo, useRef, useState } from "react";
interface ScrollViewType extends IProps {
  wrapHeight?: string;
  prop?: any;
}

const initBScroll = (el:HTMLElement) => {
  const res = new BScroll(el, {
    click: true,
    mouseWheel: {
      speed: 20,
      invert: false,
      easeTime: 300,
    },
    pullUpLoad: {
        threshold: 200
    },
    observeDOM: true,
      probeType:2,
    //  显示滚动条,
    useTransition:true,
    scrollX: false,
    momentum: true,
    scrollY: true,
    bounce: true,
    stopPropagation: true,
  })
  return res
};


export const NewsScrollView = (props: ScrollViewType) => {
  BScroll.use(MouseWheel);
  BScroll.use(Pullup)
  BScroll.use(ObserveDOM);
  const { wrapHeight, children } = props;
  const wrapRef = useRef<HTMLDivElement>(null);
  const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>();

  useEffect(()=>{
    const scrollEl =  initBScroll(wrapRef.current as HTMLDivElement)
    setScrollObj(scrollEl)
    return () => {
      scrollObj?.destroy();
  };
  },[wrapRef])

  return (

      <div className=" h-full overflow-hidden pb-5 -translate-x-[200px]"  ref={wrapRef}>
 
        {children}
   
      </div>

  );
}
