"use client"

import { formatDuration, getAudioDuration } from "@/util/Common"
import { faClock } from "@fortawesome/free-regular-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { round } from "lodash"
import Image from "next/image"
import Link from "next/link"
import { useEffect, useState } from "react"

type IProps = {
  className?: string
  song: any
  classTitle?: string
  tag?: boolean
  num?: number
  onSelectItem?: (song: any) => void
}

export default function SongItemAlbum({ className, song, classTitle, tag = false, num = 1, onSelectItem }: IProps) {
  const [audioDuration, setAudioDuration] = useState<number>(0)

  useEffect(() => {
    if (song?.file && song?.file[0]?.originFileObj) {
      const audio = song?.file[0]?.originFileObj
      if (audio) {
        getAudioDuration(audio)
          .then((duration: any) => {
            if (duration) {
              setAudioDuration(round(duration) || 0)
            }
          })
          .catch((error) => {
            console.error(error)
          })
      }
    }
  }, [song?.file])

  return (
    <div
      className={`relative border rounded-lg p-3 overflow-hidden hover:border-[var(--primary--70)] ${
        className ? className : "border-[var(--secondary-20)] bg-white"
      }`}>
      <Link
        href="#"
        scroll={false}
        className="absolute top-0 left-0 w-full h-full z-10"
        onClick={() => onSelectItem && onSelectItem(song)}></Link>
      <div className="flex items-stretch">
        <div className="h-20 w-20 rounded-lg bg-[var(--primary--20)]">
          <Image
            src={
              typeof song?.poster === "string"
                ? song?.poster
                : song?.poster && song?.poster[0]?.response
                  ? song?.poster[0]?.response?.url
                  : "/img/default_image.jpg"
            }
            alt=""
            width={80}
            height={80}
            style={{
              width: "100%",
              height: "100%",
            }}
            className="rounded-lg object-cover"
            onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
          />
        </div>
        <div className="grow flex flex-col justify-center items-center pl-4 pr-1">
          <FontAwesomeIcon icon={faClock} />
          <span className="font-semibold text-lg">{song?.duration ? formatDuration(Number(song?.duration)) : formatDuration(audioDuration)}</span>
        </div>
      </div>
      <div className="flex items-stretch gap-2 pt-2">
        <p className="text-4xl">{num}</p>
        <div>
          <p className={`font-semibold line-clamp-2 min-h-10 ${classTitle ? classTitle : "text-[var(--secondary-100)]"}`}>{song?.title || "----------"}</p>
          <p className="text-[var(--secondary-50)] text-xs line-clamp-1">{song?.artist || "----------"}</p>
        </div>
      </div>
      {tag && <p className="text-white bg-[var(--primary--70)] text-center font-semibold py-0.5 rotate-45 absolute w-full top-[4%] -right-[40%]">NEW</p>}
    </div>
  )
}