import routes from "@/routes";
import { actions } from "@/store";
import { useDispatch } from "react-redux";
import { Outlet, useLocation } from "react-router-dom";
import { useEffect, useRef, useState } from "react";

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

function LayoutPersonalVideo() {
  const dispatch = useDispatch();
  const location = useLocation();
  // const { gender } = useSelector(selectors.selectQuestionnaire);
  const [isVisibleElements, _setIsVisibleElements] = useState(false);
  // const showElementsTimer = useRef<NodeJS.Timeout>();
  const containerVideoRef = useRef<HTMLDivElement>(null);

  // const locale = getDefaultLocaleByLanguage(language);

  // const videoUrl =
  //   locale === "es"
  //     ? "/trial-choice-palmistry-es.mp4"
  //     : "/trial-choice-palmistry.mp4";

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

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

  return (
    <>
      {/* <PersonalVideo
        gender={gender}
        url={videoUrl}
        classNameContainer={
          location.pathname !== routes.client.compatibilityV4TrialChoiceVideo()
            ? styles["personal-video"]
            : ""
        }
        isVisibleControllers={isVisibleElements}
        onVideoStart={showElements}
        containerRef={containerVideoRef}
        isAutoPlay={
          location.pathname === routes.client.compatibilityV4TrialChoiceVideo()
        }
      /> */}
      <Outlet
        context={{
          containerVideoRef,
          isVisibleElements,
        }}
      />
    </>
  );
}

export default LayoutPersonalVideo;