import React, { useCallback, useEffect, useRef, useState } from "react";

import classNames from "classnames";
import ReactPlayer from "react-player";
import { useDispatch } from "react-redux";

import Spottable from "@enact/spotlight/Spottable";

import testErrorImage from "../../../assets/images/img-cart-empty@3x.png";
import { pushPanel } from "../../actions/panelActions";
import CustomImage from "../../components/CustomImage/CustomImage";
import VideoPlayer from "../../components/VideoPlayer/VideoPlayer";
import { panel_names } from "../../utils/Config";
import css from "./TVideoPlayer.module.less";

export default function TVideoPlayer({
  showUrl,
  width,
  height,
  videoIsPlaying,
  className,
  videoErrorCheck,
  videoType,
  thumbNail,
}) {
  const [videoError, setVideoError] = useState(false);
  const [videoReady, setVideoReady] = useState(false);
  const [readyChk, setReadyChk] = useState(false);
  const playerRef = useRef(null);

  // const handleReady = useCallback(() => {
  //   if (videoType === "LIVE") {
  //     videoErrorCheck(false);
  //   }
  // }, [videoErrorCheck, videoType]);

  // const handleError = useCallback(
  //   (error) => {
  //     if (videoType === "LIVE") {
  //       setVideoError(true);
  //       videoErrorCheck(true);
  //       console.error("Video error:", error);

  //       // Retry after 5 seconds
  //       setTimeout(() => {
  //         setVideoError(false);
  //         handleRestart();
  //       }, 5000);
  //     }
  //   },
  //   [videoErrorCheck, videoType, handleRestart]
  // );

  // const handleRestart = useCallback(() => {
  //   if (playerRef.current) {
  //     // playerRef.current.seekTo(0);
  //     playerRef.current.play();
  //   }
  // }, []);

  const mediainfoHandler = useCallback((ev) => {
    // Your mediainfoHandler implementation...
  }, []);

  return (
    <div className={classNames(css.videoBox, className)}>
      <VideoPlayer
        disabled={true}
        noAutoPlay={!videoIsPlaying}
        spotlightDisabled={false}
        src={showUrl}

        // onLoadedData={mediainfoHandler}
        // onDurationChange={mediainfoHandler}
      >
        <source src={showUrl} type="application/mpegurl" />
      </VideoPlayer>
    </div>
  );
}
