"use client"

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

export default function CreateAlbumContainer() {
  const setPageTitle = useSetRecoilState(titleState)
  const refFormAlbum = useRef<null | { onFinish: () => void; onCancel: () => void }>(null)

  const { isPending, mutateAsync: createAlbum } = useCreateAlbum()
  const { dataUploadImage, isPending: loadingUploadImage, uploadFileImage } = handleUploadImage()

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

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

  return (
    <div className="border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
      <HeaderBreadcrumb
        items={[
          {
            aria_label: trans("my_music_album"),
            href: "/music",
            title: trans("my_music_album"),
          },
          {
            aria_label: trans("create_new_album"),
            href: "#",
            title: trans("create_new_album"),
          },
        ]}
        slot={
          <div className="hidden lg:flex gap-2">
            <Button
              type="default"
              onClick={() => refFormAlbum?.current?.onCancel()}
              loading={isPending || loadingUploadImage}
              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 || loadingUploadImage}
              className="!rounded-lg border-[var(--primary--70)] !h-12 !px-8 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80 disabled:opacity-70">
              {tranButton("submit")}
            </Button>
          </div>
        }
      />
      <FormAlbum
        type="create"
        createAlbum={createAlbum}
        ref={refFormAlbum}
        isLoading={isPending || loadingUploadImage}
        dataUploadImage={dataUploadImage}
        uploadFileImage={uploadFileImage}
      />
    </div>
  )
}