"use client"

import { handleUploadImage } from "@/component/Account/Common"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import FormAlbum from "@/component/Music/FormAlbum"
import { useUpdateAlbum } from "@/hook/useMusic"
import { useRouter } from "@/i18n/routing"
import { titleState } from "@/recoil"
import { IAlbumDetail } from "@/type/Music"
import { Button } from "antd"
import { useTranslations } from "next-intl"
import { useEffect, useRef } from "react"
import { useSetRecoilState } from "recoil"

interface IProps {
  albumDetail: IAlbumDetail
  revalidate: (id: string) => Promise<void>
}

export default function EditAlbumContainer({albumDetail, revalidate}: IProps) {
  const setPageTitle = useSetRecoilState(titleState)
  const refFormAlbum = useRef<null | { onFinish: () => void; onCancel: () => void }>(null)
  const router = useRouter()

  const trans = useTranslations("music")
  const tranButton = useTranslations("button")

  const { isPending, mutateAsync: updateAlbum } = useUpdateAlbum()
  const { dataUploadImage, isPending: loadingUploadImage, uploadFileImage } = handleUploadImage()

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

  return (
    <div className="border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
      <HeaderBreadcrumb
        items={[
          {
            aria_label: `${trans("album")}: ${albumDetail?.title || ""}`,
            href: `/music?album=${albumDetail?.id}`,
            title: `${trans("album")}: ${albumDetail?.title || ""}`,
          },
          {
            aria_label: trans("update_album_info"),
            href: "#",
            title: trans("update_album_info"),
          },
        ]}
        slot={
          <div className="hidden lg:flex gap-2">
            <Button
              type="default"
              onClick={() => {
                refFormAlbum?.current?.onCancel()
                router.push("/music")
              }}
              loading={isPending}
              className="!rounded-lg border-[var(--secondary-20)] !h-12 !px-8 font-semibold bg-[var(--secondary-10)] hover:border-[var(--primary--70)] hover:text-[var(--primary--70)]">
              {tranButton("cancel")}
            </Button>
            <Button
              type="primary"
              onClick={() => refFormAlbum?.current?.onFinish()}
              loading={isPending}
              className="!rounded-lg border-[var(--primary--70)] !h-12 !px-8 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80">
              {tranButton("submit")}
            </Button>
          </div>
        }
      />
      <FormAlbum
        type="update"
        albumDetail={albumDetail}
        isLoading={isPending || loadingUploadImage}
        updateAlbum={updateAlbum}
        dataUploadImage={dataUploadImage}
        uploadFileImage={uploadFileImage}
        revalidate={revalidate}
        ref={refFormAlbum}
      />
    </div>
  )
}