import React, { useState, useEffect } from "react";
import _ from "lodash";
import ARImage from "../../../../../../assets/images/ar.jpg";
import scroll from "../../../../../../utils/scroll";

export default function Video({ selectedVideo, videoPosition }) {
  const height = window.innerHeight;
  const [top, setTop] = useState(null);
  useEffect(() => {
    scroll.linearFormula(
      window.scrollY > 3 * height ? 3 * height : window.scrollY,
      70,
      50,
      2.8 * height,
      3 * height
    );
    window.addEventListener("scroll", () => {
      videoTopPositionHandler(window.scrollY);
    });
  }, []);

  const videoTopPositionHandler = (scrollY) => {
    if (scrollY < 2.8 * height) {
      setTop(() => 50);
    } else if (scrollY >= 2.8 * height && scrollY < 3 * height) {
      setTop(() =>
        scroll.linearFormula(scrollY, 75, 50, 2.8 * height, 3 * height)
      );
    } else {
      setTop(() => 50);
    }
  };
  return (
    <div className="relative h-full w-full bg-transparent">
      <video
        id="video"
        className={_.join(
          [
            "video outline-none animation-puls transform",
            window.scrollY > 3.5 * window.innerHeight ? "fixed" : "absolute",
            window.scrollY > 3.5 * window.innerHeight ? "" : "-translate-y-1/2",
          ],
          " "
        )}
        style={{
          height:
            window.scrollY < 3.5 * window.innerHeight
              ? (window.innerHeight * 9) / 25
              : videoPosition?.height,
          width:
            window.scrollY < 3.5 * window.innerHeight
              ? "100%"
              : videoPosition?.width,
          left:
            window.scrollY < 3.5 * window.innerHeight
              ? "0px"
              : videoPosition?.left,
          top:
            window.scrollY < 3.5 * window.innerHeight
              ? top + "%"
              : videoPosition?.top,
        }}
        controls
        autoPlay={
          window.scrollY > 3 * window.innerHeight &&
          window.scrollY < 3.5 * window.innerHeight
        }
      >
        <source
          src={`https://dnvn.ir/api/v1/file/${20840}`}
          type={"video/mp4"}
        />
      </video>
      <img src={ARImage} className="w-full absolute bottom-0 left-0" />
    </div>
  );
}