import { JSX, createEffect, createSignal, onCleanup } from "solid-js";

function ProgressHandler() {
  const [scrollPercentage, setScrollPercentage] = createSignal(0);
  //   const [active, setActive] = createSignal("");
  //   const [zoomLevel, setZoomLevel] = createSignal(0);
  //   const zoomAmount = () => 1 + zoomLevel() * 0.5;
  //   const [x, setX] = createSignal(0);
  //   const [y, setY] = createSignal(0);

  function ProgressBar() {
    // const [muted, setMuted] = createSignal(true);
    // const [controlls, setControlls] = createSignal(false);
    // const [clientX, setClientX] = createSignal(0);
    // const [clientY, setClientY] = createSignal(0);
    // const [ref, setRef] = createSignal<HTMLElement | null>(null);

    const handleScroll = () => {
      const scrollHeight =
        document.documentElement.scrollHeight - window.innerHeight;
      const currentScroll = window.scrollY;
      const scrollPercentage = (currentScroll / scrollHeight) * 100;
      setScrollPercentage(scrollPercentage);
    };

    createEffect(() => {
      window.addEventListener("scroll", handleScroll);
      onCleanup(() => {
        window.removeEventListener("scroll", handleScroll);
      });
    });

    createEffect(() => {
      //   const thisRef = ref();
      //   if (!thisRef) return;
      //   const rectA = thisRef.getBoundingClientRect();
      //   const origSizeW = rectA.width / zoomAmount();
      //   const origSizeH = rectA.height / zoomAmount();
      //   const rectW = wrapperRef.getBoundingClientRect();
      //   const hori = rectW.width - origSizeW + origSizeW / zoomAmount();
      //   const verti = rectW.height - origSizeH + origSizeH / zoomAmount();
      //   const xP = (clientX() - hori / 2) / (rectW.width - hori);
      //   const yP = (clientY() - verti / 2) / (rectW.height - verti);
      //   setX((xP > 0 ? (xP < 1 ? xP : 1) : 0) * origSizeW);
      //   setY((yP > 0 ? (yP < 1 ? yP : 1) : 0) * origSizeH);
      //   const moving =
      //     clientX() > (rectW.width - origSizeW) / 2 &&
      //     clientX() < rectW.width - (rectW.width - origSizeW) / 2 &&
      //     clientY() > (rectW.height - origSizeH) / 2 &&
      //     clientY() < rectW.height - (rectW.height - origSizeH) / 2;
      //   setMoving(moving);
    });

    // let wrapperRef: HTMLDivElement;

    createEffect(() => {
      //   if (active()) return;
      //   setZoomLevel(0);
      //   setMuted(true);
      //   setControlls(false);
    });

    return (
      <div class="progress">
        <></>
      </div>
    );
  }

  function Chapter(props: { children: JSX.Element }) {
    let divRef: HTMLDivElement;
    // let videoRef: HTMLVideoElement;

    // const shouldZoom = () => active() === props.src && !!zoomLevel();

    return <div ref={divRef!}>{props.children}</div>;
  }

  return { FullscreenView: ProgressBar, Asset: Chapter };
}

export default ProgressHandler;