"use client"

import { LoadMoreInfinite } from "@/component/Common/LoadMoreInfinite"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { useNotificationContext } from "@/component/Layout/NotificationContext"
import AlbumVertical from "@/component/Music/AlbumVertical"
import FormSong from "@/component/Music/FormSong"
import SongItemAlbum from "@/component/Music/SongItemAlbum"
import NotFoundBox from "@/component/Notfound"
import { useDeleteSong, useGetSongs } from "@/hook/useMusic"
import { useRouter } from "@/i18n/routing"
import { titleState } from "@/recoil"
import { faPlus } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useQueryClient } from "@tanstack/react-query"
import { flattenDeep, set } from "lodash"
import { useTranslations } from "next-intl"
import Link from "next/link"
import { useEffect, useMemo, useState } from "react"
import { useSetRecoilState } from "recoil"

type IProp = {
  albumDetail: any
}

export default function AlbumDetailContainer({ albumDetail }: IProp) {
  const router = useRouter()
  const { notify } = useNotificationContext()
  const queryClient = useQueryClient()
  const setPageTitle = useSetRecoilState(titleState)

  const tranButton = useTranslations("button")
  const transMessage = useTranslations("message")

  const [submit, setSubmit] = useState(false)
  const [cancel, setCancel] = useState(false)
  const [addSong, setAddSong] = useState(false)
  const [formData, setFormData] = useState<any>({})
  const [songSelected, setSongSelected] = useState<any>(null)
  const [isNextPageSong, setIsNextPageSong] = useState(true)

  const deleteSong = useDeleteSong()
  const {
    data: dataSong,
    isLoading: isLoadingSongs,
    fetchNextPage: fetchNextPageSongs,
    hasNextPage: hasNextPageSongs,
    isFetchingNextPage: isFetchingNextPageSongs,
    refetch
  } = useGetSongs(albumDetail?.id, Boolean(albumDetail?.id))

   const handleRefetch = () => {
     queryClient.removeQueries({ queryKey: ["music.get_list_music", albumDetail?.id] })
     refetch()
   }

  const dataSongs = useMemo(
    () => (flattenDeep(dataSong?.pages.map((e: any) => e.data!)).length > 0 ? flattenDeep(dataSong?.pages.map((e: any) => e?.data?.data?.songs)) : []),
    [dataSong?.pages],
  )

  useEffect(() => {
    if (Number(dataSong?.pageParams?.at(-1)) >= Number(dataSong?.pages?.at(-1)?.data?.data?.total_pages)) {
      setIsNextPageSong(false)
    }
    if (!isNextPageSong && Number(dataSong?.pageParams?.at(-1)) < Number(dataSong?.pages?.at(-1)?.data?.data?.total_pages)) {
      setIsNextPageSong(true)
    }
  }, [isNextPageSong, dataSong?.pages, dataSong?.pageParams])

  useEffect(() => {
    setPageTitle("Music")
  }, [])

  const handleSelectSong = (song: any) => {
    setSongSelected(song)
    setFormData(song)
    setAddSong(true)
  }

  const handleDeleteSong = (song: any) => {
    deleteSong
      .mutateAsync(song?.id)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: "Delete song successfully",
        })
        setSubmit(false)
        setCancel(true)
        setAddSong(false)
        setSongSelected(null)
        router.refresh()
        queryClient.invalidateQueries({ queryKey: ["music.get_list_music", albumDetail?.id] })
      })
      .catch((errors) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data?.msgs || transMessage("fail"),
        })
      })
  }

  return (
    <div className="border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
      <HeaderBreadcrumb
        items={[
          {
            aria_label: "Album",
            href: `/music?album=${albumDetail?.id}`,
            title: `Album: ${albumDetail?.title}`,
          },
          {
            aria_label: "Edit Playlist",
            href: "#",
            title: "Edit Playlist",
          },
        ]}
        slot={
          <div className="hidden md:flex">
            {/* <button
              type="button"
              className="rounded-lg border border-solid border-[var(--primary--70)] h-12 px-8 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80 ml-2">
              {tranButton("submit")}
            </button> */}
          </div>
        }
      />
      <div className="grow overflow-y-auto">
        <div className="px-4 py-6 border-b border-[var(--secondary-20)] overflow-x-auto flex gap-2">
          <AlbumVertical album={albumDetail} />
          {addSong ? (
            <SongItemAlbum
              song={formData}
              num={songSelected ? 0 : 1}
              tag={!songSelected ? true : false}
              className="border-[var(--primary--70)] bg-[var(--primary--20)] min-w-48"
            />
          ) : (
            <button
              type="button"
              onClick={() => {
                setAddSong(true)
                setSongSelected(null)
              }}
              className="bg-white border border-dashed rounded-lg border-[var(--secondary-40)] px-4 inline-flex flex-col justify-center items-center w-36 text-[var(--secondary-100)] hover:border-[var(--primary--70)] hover:text-[var(--primary--70)]">
              <FontAwesomeIcon
                icon={faPlus}
                className="text-2xl"
              />
              <span className="lg:text-base mt-1 min-w-36">New Songs</span>
            </button>
          )}
          {dataSongs && dataSongs?.length ? (
            <>
              <div className="border-l border-[var(--secondary-20)] px-6 ml-6 flex items-center gap-2">
                {dataSongs?.map((song: any, index: number) => (
                  <SongItemAlbum
                    key={index}
                    num={addSong && !songSelected ? index + 2 : index + 1}
                    song={song}
                    tag={false}
                    className="min-w-48 bg-white"
                    onSelectItem={handleSelectSong}
                  />
                ))}
              </div>

              <LoadMoreInfinite
                isLoading={isLoadingSongs || isFetchingNextPageSongs}
                isNextPage={isNextPageSong}
                hasNextPage={hasNextPageSongs}
                fetchNextPage={fetchNextPageSongs}
              />
            </>
          ) : null}
        </div>
        <div className="px-4 py-6 border-b border-[var(--secondary-20)] flex items-center justify-between">
          <h2 className="font-bold text-xl lg:text-2xl text-[var(--secondary-100)]">Playlist</h2>
          {addSong ? (
            <div className="hidden md:block">
              <button
                type="button"
                onClick={() => {
                  setCancel(true)
                  setAddSong(false)
                }}
                className="rounded-lg border border-solid border-[var(--secondary-20)] h-12 px-6 font-semibold bg-white text-[var(--secondary-100)] hover:opacity-80 mr-2">
                {tranButton("cancel")}
              </button>
              <button
                type="button"
                onClick={() => setSubmit(true)}
                className="rounded-lg border border-solid border-[var(--primary--70)] h-12 px-6 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80 disabled:opacity-70">
                {tranButton("submit")}
              </button>
              {songSelected ? (
                <button
                  type="button"
                  onClick={() => handleDeleteSong(songSelected)}
                  className="rounded-lg border border-solid border-[var(--danger-70)] h-12 px-6 font-semibold bg-[var(--danger-70)] text-white hover:opacity-80 ml-2">
                  {tranButton("delete")}
                </button>
              ) : null}
            </div>
          ) : (
            <button
              type="button"
              onClick={() => {
                setAddSong(true)
                setSongSelected(null)
              }}
              className="rounded-lg border border-solid border-[var(--primary--70)] h-12 px-6 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80">
              <FontAwesomeIcon
                icon={faPlus}
                className="text-lg mr-2"
              />
              <span className="lg:text-base">Add Song</span>
            </button>
          )}
        </div>
        <div className="px-4 py-6">
          {addSong ? (
            <FormSong
              song={songSelected}
              submit={submit}
              cancel={cancel}
              album={albumDetail}
              onError={() => {
                setSubmit(false)
                setCancel(false)
              }}
              onCancel={() => {
                setSubmit(false)
                setCancel(true)
                setTimeout(() => {
                  setCancel(false)
                }, 1000)
                setAddSong(false)
                setSongSelected(null)
              }}
              onChangeValue={(values) => setFormData(values)}
              onSuccess={() => {
                setSubmit(false)
                setCancel(true)
                setTimeout(() => {
                  setCancel(false)
                }, 1000)
                setAddSong(false)
                setSongSelected(null)
                router.refresh()
                handleRefetch()
              }}
            />
          ) : dataSongs && dataSongs?.length ? (
            <div>
              <NotFoundBox
                className="!bg-white py-8"
                backHome={false}
                message="This region is for "
                image="/img/audio_black.png"
                slot={
                  <p className="text-[var(--secondary-40)]">
                    <Link
                      href="#"
                      scroll={false}
                      onClick={() => {
                        setAddSong(true)
                        setSongSelected(null)
                      }}
                      className="font-bold text-[var(--secondary-100)] px-1.5 underline">
                      add new song
                    </Link>
                    or
                    <Link
                      href="#"
                      scroll={false}
                      className="font-bold text-[var(--secondary-100)] px-1.5 underline">
                      edit song
                    </Link>
                    from album
                  </p>
                }
              />
            </div>
          ) : (
            <div>
              <NotFoundBox
                className="!bg-white py-8"
                backHome={false}
                message="We found nothing here"
                slot={
                  <button
                    type="button"
                    onClick={() => {
                      setAddSong(true)
                      setSongSelected(null)
                    }}
                    className="text-center inline-block w-full underline font-medium lg:text-lg">
                    Add songs to album
                  </button>
                }
              />
            </div>
          )}
        </div>
      </div>
    </div>
  )
}