"use client"

import { useEffect, useMemo, useState } from "react"
import { useTranslations } from "next-intl"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faPlus } from "@fortawesome/free-solid-svg-icons"
import MusicPlayer from "./PlayMusic"
import TableMusic from "./Table"
import { useRecoilState, useSetRecoilState } from "recoil"
import { activeMusicCategoryState, songPlayingState } from "@/recoil"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { Link } from "@/i18n/routing"
import { SwiperMusicCategory } from "./SwiperMusicCategory"
import { useGetAlbumList, useGetSongs, useShareAlbumMusic } from "@/hook/useMusic"
import { flattenDeep } from "lodash"
import { LoadingBox } from "@/component/Common/LoadingBox"
import { useSearchParams } from "next/navigation"
import { useNotificationContext } from "@/component/Layout/NotificationContext"

export const ListMusic = () => {
  const trans = useTranslations("music")
  const [activeMusicCategory, setActiveMusicCategory] = useRecoilState(activeMusicCategoryState)
  const [isNextPage, setIsNextPage] = useState(true)
  const [isNextPageSong, setIsNextPageSong] = useState(true)
  const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useGetAlbumList()
  const {
    data: dataSong,
    isLoading: isLoadingSongs,
    fetchNextPage: fetchNextPageSongs,
    hasNextPage: hasNextPageSongs,
    isFetchingNextPage: isFetchingNextPageSongs,
  } = useGetSongs(activeMusicCategory, Boolean(activeMusicCategory))
  const searchParams = useSearchParams()
  const { notify } = useNotificationContext()
  const transMessage = useTranslations("message")
  const shareAlbumMusic = useShareAlbumMusic()
  const setPlayMusic = useSetRecoilState(songPlayingState)

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

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

  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 (dataSongs.length) setPlayMusic(dataSongs[0])
  }, [dataSongs])

  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(() => {
    if (dataAlbums) {
      if (searchParams.get("album")) {
        const album = dataAlbums.find((item) => item?.id === searchParams.get("album"))
        if (album) setActiveMusicCategory(album.id)
        else setActiveMusicCategory(dataAlbums?.[0]?.id)
      } else setActiveMusicCategory(dataAlbums?.[0]?.id)
    }
  }, [dataAlbums, searchParams])

  const handleShare = (album: string, user: string) => {
    shareAlbumMusic
      .mutateAsync({ id: album, uid: user })
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: "Share album successfully",
        })
      })
      .catch((errors) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data?.msgs || transMessage("fail"),
        })
      })
  }

  return (
    <div className="p-1 xs:p-4 overflow-y-auto flex flex-col h-full">
      <SwiperMusicCategory
        dataSource={dataAlbums || []}
        keyActiveMusicCategory={activeMusicCategory}
        setKeyActiveMusicCategory={setActiveMusicCategory}
        isLoading={isLoading || isFetchingNextPage}
        isNextPage={isNextPage}
        hasNextPage={hasNextPage}
        fetchNextPage={fetchNextPage}
        userShares={[]}
        onShare={handleShare}
      />

      <div className="border border-[var(--secondary-20)] rounded-lg grow">
        <HeaderBreadcrumb
          showButton={false}
          items={[
            {
              aria_label: dataAlbums?.find((item) => item?.id === activeMusicCategory)?.title || "",
              href: "#",
              title: dataAlbums?.find((item) => item?.id === activeMusicCategory)?.title || "",
            },
          ]}
          slot={
            <div>
              {activeMusicCategory ? (
                <Link
                  aria-label="Edit album"
                  href={`/music/${activeMusicCategory}`}
                  className="rounded-lg border border-solid border-[var(--primary--70)] px-4 py-[14px] font-bold bg-[var(--primary--70)] !text-white text-base hover:opacity-80 whitespace-nowrap">
                  <FontAwesomeIcon icon={faPlus} />
                  {` ${trans("edit_playlist")}`}
                </Link>
              ) : null}
            </div>
          }
        />
        {isLoading || isFetchingNextPage ? (
          <LoadingBox icon="/img/gif/Music.gif" />
        ) : (
          <div className="flex flex-col-reverse lg:flex-row overflow-hidden">
            <TableMusic
              dataSourceMusic={dataSongs || []}
              isLoading={isLoadingSongs || isFetchingNextPageSongs}
              isNextPage={isNextPageSong}
              hasNextPage={hasNextPageSongs}
              fetchNextPage={fetchNextPageSongs}
            />
            <MusicPlayer dataSourceMusic={dataSongs || []} />
          </div>
        )}
      </div>
    </div>
  )
}