import { MouseEventHandler, RefObject, useState } from "react";
import PauseIcon from "@/components/icons/PauseIcon";
import PlayIcon from "@/components/icons/PlayIcon";

export function VideoProgressBar({
  muted,
  progressbarRef,
  playing,
  handlePlaybackClick,
  handleProgressbarClick,
  progress,
}: {
  muted: boolean;
  progress: number;
  progressbarRef: RefObject<HTMLDivElement | null>;
  playing: boolean;
  handlePlaybackClick: MouseEventHandler<HTMLButtonElement>;
  handleProgressbarClick: MouseEventHandler<HTMLDivElement>;
}) {
  const [isMouseDown, setIsMouseDown] = useState(false);

  return (
    <div
      className={`bottom-2 left-2 right-2 absolute z-10 select-none flex items-stretch gap-1 ${
        muted ? "hidden" : ""
      }`}
    >
      <button
        type="button"
        className="p-[18px] bg-[#37393B99] rounded-2xl cursor-pointer"
        onClick={handlePlaybackClick}
      >
        {playing ? (
          <div className="text-white lg:size-[1.389vw] size-5">
            <PauseIcon />
          </div>
        ) : (
          <div className="text-white lg:size-[1.389vw] size-5">
            <PlayIcon />
          </div>
        )}
      </button>
      <div
        className="flex-1 rounded-2xl bg-[#37393B99] px-6 cursor-pointer flex items-center select-none"
        onMouseDown={(e) => {
          setIsMouseDown(true);
          handleProgressbarClick(e);
        }}
        onMouseMove={(e) => {
          if (isMouseDown) handleProgressbarClick(e);
        }}
        onMouseUp={() => setIsMouseDown(false)}
        onMouseLeave={() => setIsMouseDown(false)}
      >
        <div
          ref={progressbarRef}
          className="h-1 bg-[#7A7A7A] relative rounded-3xl cursor-pointer w-full"
        >
          <div
            className="left-0 h-1 bg-white rounded-3xl transition-all"
            style={{
              width: progress + "%",
            }}
          />
        </div>
      </div>
    </div>
  );
}
