import React, { memo, useCallback } from "react";

import ReactPlayer from "react-player";

import VideoPlayer from "../../../../components/VideoPlayer/VideoPlayer";
import { scaleH, scaleW } from "../../../../utils/helperMethods";

export default memo(function PopularVideoPlayer({
  className,
  readyCb,
  src,
  shouldPlay,
  width,
  height,
}) {
  const handleReady = useCallback(() => {
    readyCb && readyCb(true);
  }, [readyCb]);

  const mediainfoHandler = useCallback((e) => {
    const type = e.type;

    if (type !== "timeupdate") {
      console.log("@@ [mediaInfoHandler].....", type);
    }
    switch (type) {
      case "loadeddata":
        console.log("@@ [mediaInfoHandler] loaded data");
        break;

      case "durationchange":
        console.log("@@ [mediaInfoHandler] duration", e.currentTarget.duration);
        break;
    }
  }, []);

  return (
    <div>
      {typeof window === window.PalmSystem ? (
        <VideoPlayer
          className={className}
          noAutoShowMediaControls
          // onLoadedData={handleReady}
          onLoadedData={mediainfoHandler}
          onDurationChange={mediainfoHandler}
          spotlightDisabled
        >
          {shouldPlay && <source src={src} type="application/mpegurl" />}
        </VideoPlayer>
      ) : (
        <ReactPlayer
          className={className}
          onReady={handleReady}
          playing={shouldPlay}
          url={shouldPlay ? src : ""}
          width={scaleW(width)}
          height={scaleH(height)}
        />
      )}
    </div>
  );
});
