import PersonalVideo from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo";
import styles from "./styles.module.css";
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { useCallback, useEffect, useRef, useState } from "react";
import { Outlet, useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import routes from "@/routes";

export interface IOutletContext {
  containerVideoRef: React.RefObject<HTMLDivElement>;
  isVisibleElements: boolean;
  setIsVisibleElements: (value: boolean) => void;
  setShowElements: (value: () => void) => void;
}

function LayoutABDesignV1() {
  const dispatch = useDispatch();
  const location = useLocation();
  const mainRef = useRef<HTMLDivElement>(null);
  useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
    location,
  ]);
  const [isVisibleElements, setIsVisibleElements] = useState(false);
  const { gender } = useSelector(selectors.selectQuestionnaire);
  const containerVideoRef = useRef<HTMLDivElement>(null);
  const showElementsTimer = useRef<NodeJS.Timeout>();

  const showElements = useCallback(() => {
    showElementsTimer.current = setTimeout(() => {
      setIsVisibleElements(true);
    }, 33_000);
  }, [setIsVisibleElements]);

  useEffect(() => {
    if (location.pathname !== routes.client.trialChoiceVideoV1()) {
      dispatch(actions.personalVideo.updateIsVideoPlaying(false));
    }
  }, [dispatch, location.pathname]);

  return (
    <>
      <main className={`${styles.main} content`} ref={mainRef}>
        {/* <Suspense fallback={<LoadingPage />}> */}
        <PersonalVideo
          gender={gender}
          url={"/trial-choice.MOV"}
          classNameContainer={
            location.pathname !== routes.client.trialChoiceVideoV1()
              ? styles["personal-video"]
              : ""
          }
          isVisibleControllers={isVisibleElements}
          onVideoStart={showElements}
          containerRef={containerVideoRef}
          isAutoPlay={location.pathname === routes.client.trialChoiceVideoV1()}
        />
        <Outlet
          context={{
            containerVideoRef,
            isVisibleElements,
          }}
        />
        {/* </Suspense> */}
      </main>
    </>
  );
}

export default LayoutABDesignV1;