"use client"

import classNames from "classnames"
import React, { useState, useRef, useEffect } from "react"
import ReactPlayer from "react-player"
import { InputRangeCss } from "./style"
import Image from "next/image"
import { IIcons } from "@/type/Music"
import { useRecoilState } from "recoil"
import { songPlayingState, typePlayMusicState } from "@/recoil"
import { useTranslations } from "next-intl"

interface IProps {
  dataSourceMusic: any
}

const AudioPlayer = (props: IProps) => {
  const trans = useTranslations("music")

  const playerRef = useRef<any>(null)
  const [played, setPlayed] = useState(0)
  const [playedSeconds, setPlayedSeconds] = useState(0)
  const [duration, setDuration] = useState(0)
  const [remainingTime, setRemainingTime] = useState(0)
  const [defaulPlay, setDefaulPlay] = useRecoilState(typePlayMusicState)
  const [songPlaying, setSongPlaying] = useRecoilState(songPlayingState)
  const [isDisabled, setIsDisabled] = useState(false)

  useEffect(() => {
    setTimeout(() => {
      if (props?.dataSourceMusic?.length > 0) {
        setIsDisabled(false)
      } else {
        setIsDisabled(true)
      }
    }, 500)
  }, [props?.dataSourceMusic?.length, isDisabled])

  useEffect(() => {
    return () => {
      console.log("unmounnnt")
      setDefaulPlay({
        iconShuffle: "/img/icon/ms_shuffle_outline.svg",
        iconPrevious: "/img/icon/ms_previous.svg",
        iconBackward: "/img/icon/ms_backward.svg",
        iconPause: "/img/icon/ms_pause.svg",
        iconForward: "/img/icon/ms_forward.svg",
        iconNext: "/img/icon/ms_next.svg",
        iconRepeat: "/img/icon/ms_repeat_outline.svg",
        isShuffle: true,
        isRepeat: true,
        isPause: false,
      })
    }
  }, [])

  const handleEnded = () => {
    const currentIndex = props?.dataSourceMusic?.findIndex((item: any) => item?.id === songPlaying?.id)

    if (defaulPlay?.isShuffle && defaulPlay?.isRepeat) {
      handleRandom()
    } else if (currentIndex < props?.dataSourceMusic?.length || defaulPlay?.isRepeat) {
      handleNext()
    }
  }

  useEffect(() => {
    if (played === 1) {
      setRemainingTime(duration)
      setPlayedSeconds(0)
    } else {
      setRemainingTime(duration - playedSeconds)
    }
  }, [playedSeconds, duration, played])

  const formatTime = (seconds: any) => {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = Math.floor(seconds % 60)

    return `${minutes < 10 ? "0" : ""}${minutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`
  }

  const handlePlayPause = () => {
    setDefaulPlay((prevState) => ({
      ...prevState,
      iconPause: prevState.isPause ? "/img/icon/ms_pause.svg" : "/img/icon/ms_play.svg",
      isPause: !prevState?.isPause,
    }))
  }

  const handleProgress = (progress: any) => {
    setPlayed(progress.played)
  }

  const handleSeek = (e: any) => {
    const seekTo = parseFloat(e.target.value)
    playerRef.current.seekTo(seekTo)
    setPlayed(seekTo)
  }

  const handleForward = () => {
    const newPlayed = Math.min(played + 10 / duration, 1)
    setPlayed(newPlayed)
    playerRef.current.seekTo(newPlayed)
  }

  const handleBackward = () => {
    const newPlayed = Math.max(played - 10 / duration, 0)
    setPlayed(newPlayed)
    playerRef.current.seekTo(newPlayed)
  }

  const handleNext = () => {
    setSongPlaying((pre) => {
      const currentIndex = props?.dataSourceMusic?.findIndex((item: any) => item?.id === pre?.id)
      const nextIndex = (currentIndex + 1) % props?.dataSourceMusic?.length
      const songNext = props?.dataSourceMusic?.[nextIndex]

      return songNext
    })
  }

  const handlePrevious = () => {
    setSongPlaying((pre) => {
      const currentIndex = props?.dataSourceMusic?.findIndex((item: any) => item?.id === pre?.id)
      const prevIndex = (currentIndex - 1 + props?.dataSourceMusic?.length) % props?.dataSourceMusic?.length
      const songPre = props?.dataSourceMusic?.[prevIndex]

      return songPre
    })
  }

  const handleRandom = () => {
    setSongPlaying(() => {
      const randomIndex = Math.floor(Math.random() * props?.dataSourceMusic?.length)
      const songPre = props?.dataSourceMusic[randomIndex]

      return songPre
    })
  }

  const renderIcon = (propsIcon: IIcons) => {
    return (
      <div
        className={`w-8 flex items-center justify-center gap-3 ${propsIcon?.classNameBox || ""}`}
        onClick={isDisabled ? (e) => e.preventDefault() : propsIcon?.onClick}>
        <Image
          src={propsIcon?.url_image}
          alt={propsIcon?.alt_image || ""}
          width={propsIcon?.width_image || 300}
          height={propsIcon?.height_image || 300}
          className={`aspect-square ${(!isDisabled && "hover:scale-[1.1]") || ""} ${propsIcon?.classNameImage || ""}`}
        />
      </div>
    )
  }

  return (
    <div className="mx-auto my-5 lg:m-5 py-6 px-5 w-full lg:w-[25rem] bg-[var(--secondary-10)] rounded-3xl shadow-lg text-center">
      <p className="text-lg leading-[22px] text-[var(--secondary-100)] font-medium mb-4">{trans("now_playing")}</p>

      <div className="w-[10rem] h-[10rem] flex items-center justify-center mx-auto mb-6 shadow-lg rounded-xl">
        {isDisabled ? (
          <p className="text-center text-sm font-light text-[var(--secondary-50)] px-5 py-7 rounded-xl">{trans("please_select_song")}</p>
        ) : (
          <Image
            src={songPlaying?.poster}
            alt={"avt"}
            width={160}
            height={160}
            className={`aspect-square rounded-xl`}
            onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
          />
        )}
      </div>
      <p className="text-lg leading-[25px] text-[var(--secondary-100)] font-bold mb-[2px]">{isDisabled ? "--------------" : songPlaying?.title}</p>
      <p className="text-sm font-light text-[var(--secondary-100)] mb-6">{isDisabled ? "---------" : songPlaying?.artist}</p>

      <ReactPlayer
        ref={playerRef}
        url={songPlaying?.file}
        playing={Boolean(defaulPlay?.isPause)}
        width="0"
        height="0"
        onProgress={(progress) => {
          setPlayedSeconds(progress.playedSeconds)
          handleProgress(progress)
        }}
        onDuration={(duration) => setDuration(duration)}
        onEnded={handleEnded}
        loop={false}
      />

      <div className={classNames("w-full mb-3", InputRangeCss)}>
        <input
          disabled={isDisabled}
          type="range"
          min={0}
          max={1}
          step="0.01"
          value={isDisabled ? 0 : played}
          onChange={handleSeek}
          style={
            {
              "--progress": `${played * 100}%`,
              "--inputRangeColor": `${isDisabled ? "#D1D5DB" : "#f59e0b"}`,
              pointerEvents: isDisabled ? "none" : "auto",
            } as React.CSSProperties
          }
        />
      </div>
      <div className="flex justify-between mb-3">
        <span>{isDisabled ? formatTime(0) : formatTime(playedSeconds)}</span>
        <span>{isDisabled ? formatTime(0) : `${playedSeconds === 0 ? "" : "-"}${formatTime(remainingTime)}`}</span>
      </div>
      <div className="flex justify-between items-center">
        {renderIcon({
          url_image: defaulPlay?.iconShuffle,
          alt_image: "Shuffle",
          onClick: () => {
            setDefaulPlay((prevState) => ({
              ...prevState,
              iconShuffle:
                prevState.iconShuffle === "/img/icon/ms_shuffle_outline.svg" && prevState?.isShuffle
                  ? "/img/icon/ms_shuffle.svg"
                  : "/img/icon/ms_shuffle_outline.svg",
              isShuffle: !prevState?.isShuffle,
            }))
          },
        })}
        {renderIcon({
          url_image: defaulPlay?.iconPrevious,
          alt_image: "Previous",
          onClick: () => {
            handlePrevious()
          },
        })}
        {renderIcon({
          url_image: defaulPlay?.iconBackward,
          alt_image: "Backward",
          onClick: () => {
            handleBackward()
          },
        })}
        {renderIcon({
          url_image: defaulPlay?.iconPause,
          alt_image: "Pause",
          classNameBox: "!w-14",
          onClick: () => {
            handlePlayPause()
          },
        })}
        {renderIcon({
          url_image: defaulPlay?.iconForward,
          alt_image: "Forward",
          onClick: () => {
            handleForward()
          },
        })}
        {renderIcon({
          url_image: defaulPlay?.iconNext,
          alt_image: "Next",
          onClick: () => {
            handleNext()
          },
        })}
        {renderIcon({
          url_image: defaulPlay?.iconRepeat,
          alt_image: "Repeat",
          onClick: () => {
            setDefaulPlay((prevState) => ({
              ...prevState,
              iconRepeat:
                prevState.iconRepeat === "/img/icon/ms_repeat_outline.svg" && prevState?.isRepeat
                  ? "/img/icon/ms_repeat.svg"
                  : "/img/icon/ms_repeat_outline.svg",
              isRepeat: !prevState?.isRepeat,
            }))
          },
        })}
      </div>
    </div>
  )
}

export default AudioPlayer