"use client"

import { faPlus } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import Image from "next/image"
import { useEffect, useMemo, useState } from "react"
import { CustomDropDownMenuCss, DropDownMenu } from "../Common/DropDownMenu"
import { useTranslations } from "next-intl"
import classNames from "classnames"
import PhotoDetail from "./PhotoDetail"
import FormAlbum from "./FormAlbum"
import FormPhoto from "./FormPhoto"
import PhotoShare from "./PhotoShare"
import NotFoundBox from "../Notfound"
import SwiperMedia from "./SwiperMedia"
import { useDeletePhoto, useDeletePhotoAlbum, useGetAlbums, useGetPhotoInAlbums, useShareAlbumPhoto } from "@/hook/usePhoto"
import { IAlbum } from "@/type/Media"
import { useNotificationContext } from "../Layout/NotificationContext"
import { renderLabelItem } from "@component/Common/LabelItem"
import { LoadingBox } from "@component/Common/LoadingBox"
import { useDownload } from "@/hook/useCommon"
import { flattenDeep } from "lodash"
import { LoadMoreInfinite } from "@component/Common/LoadMoreInfinite"
import { useQueryClient } from "@tanstack/react-query"
import { useSearchParams } from "next/navigation"

export default function PhotoContent() {
  const { notify } = useNotificationContext()
  const { handleDownload } = useDownload()
  const queryClient = useQueryClient()

  const transBook = useTranslations("book")
  const transMessage = useTranslations("message")
  const transGeneral = useTranslations("general")
  const searchParams = useSearchParams()

  const [addPhoto, setAddPhoto] = useState(false)
  const [imageSelected, setImageSelected] = useState<any>(null)
  const [openDetail, setOpenDetail] = useState(false)
  const [formAlbum, setFormAlbum] = useState(false)
  const [openShare, setOpenShare] = useState(false)
  const [albumSelected, setAlbumSelected] = useState<any>(null)
  const [keySelectMedia, setKeySelectMedia] = useState<any>("")
  const [isNextPage, setIsNextPage] = useState(true)

  const { data: dataSource, refetch: refetchAlbums, isLoading: loadingAlbum } = useGetAlbums({ pageSize: 50, pageNum: 1 })
  const deletePhotoAlbum = useDeletePhotoAlbum()
  const deletePhoto = useDeletePhoto()
  const shareAlbumPhoto = useShareAlbumPhoto()
  const { data, isLoading: loadingPhoto, fetchNextPage, hasNextPage, isFetchingNextPage } = useGetPhotoInAlbums(albumSelected?.id, Boolean(albumSelected?.id))

  const dataPhoto = useMemo(
    () => (flattenDeep(data?.pages.map((e: any) => e.data!)).length > 0 ? flattenDeep(data?.pages.map((e: any) => e?.data?.data?.photos)) : []),
    [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 items = [
    {
      label: renderLabelItem("Info", "/img/icon/information_circle_outline.svg", "information_circle_outline"),
      key: "0",
      onClick: () => setOpenDetail(true),
    },
    {
      label: renderLabelItem(transBook("edit"), "/img/icon/edit.svg", "edit"),
      key: "1",
      onClick: () => setAddPhoto(true),
    },
    {
      label: renderLabelItem(transGeneral("download"), "/img/icon/download_outline.svg", transGeneral("download")),
      key: "2",
      onClick: () => handleDownloadPhoto(),
    },
    // {
    //   label: renderLabelItem("Share", "/img/icon/redo.svg", "Share"),
    //   key: "3",
    //   onClick: () => setOpenShare(true),
    // },
    {
      label: renderLabelItem(transBook("delete"), "/img/icon/trash_outline.svg", "Delete"),
      key: "4",
      onClick: () => handleDeletePhoto(imageSelected),
    },
  ]

  const handleOpenChange = (open: boolean, photo: any) => {
    if (open) {
      setImageSelected(photo)
    }
  }

  const handleDownloadPhoto = () => {
    handleDownload(imageSelected?.file || imageSelected?.fileorg_url, imageSelected?.title)
  }

  useEffect(() => {
    if (dataSource?.data && !albumSelected) {
      if (searchParams.get("album")) {
        const album = dataSource?.data.albums.find((item: any) => item?.id === searchParams.get("album"))
        if (album) setAlbumSelected(album)
        else setAlbumSelected(dataSource?.data?.albums[0] || null)
      } else setAlbumSelected(dataSource?.data?.albums[0] || null)
    }
  }, [dataSource, searchParams])

  const handleDeleteAlbum = (album: IAlbum) => {
    if (album.id === albumSelected?.id) {
      setAlbumSelected(null)
    }
    deletePhotoAlbum
      .mutateAsync(album.id)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: "Delete album successfully",
        })
        refetchAlbums()
      })
      .catch((errors) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data?.msgs || transMessage("fail"),
        })
      })
  }

  const handleDeletePhoto = (photo: any) => {
    deletePhoto
      .mutateAsync(photo.id)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: "Delete photo successfully",
        })
        refetchAlbums()
        queryClient.invalidateQueries({ queryKey: ["photo.get_list_photos", albumSelected?.id] })
      })
      .catch((errors) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data?.msgs || transMessage("fail"),
        })
      })
  }

  const handleShare = (album: string, user: string) => {
    shareAlbumPhoto
      .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="h-full flex flex-col">
      <SwiperMedia
        dataSource={dataSource?.data?.albums || []}
        albumSelected={albumSelected}
        isLoading={loadingAlbum}
        userShares={[]}
        onAddAlbum={() => {
          setFormAlbum(true)
          setAlbumSelected(null)
        }}
        onEditAlbum={(value) => {
          setAlbumSelected(value)
          setFormAlbum(true)
        }}
        onSelectAlbum={setAlbumSelected}
        onDeleteAlbum={handleDeleteAlbum}
        keySelectMedia={keySelectMedia}
        setKeySelectMedia={setKeySelectMedia}
        onShare={handleShare}
      />
      <div className="border border-[var(--secondary-20)] rounded-lg grow overflow-y-auto flex flex-col">
        <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)]">All Photos</h2>
          {albumSelected ? (
            <button
              type="button"
              onClick={() => {
                setAddPhoto(true)
                setImageSelected("")
              }}
              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 Photo</span>
            </button>
          ) : null}
        </div>
        <div className="px-4 py-6 grow">
          {loadingPhoto ? (
            <LoadingBox icon="/img/gif/Media.gif" />
          ) : dataPhoto && dataPhoto?.length ? (
            <>
              <div className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4">
                {dataPhoto?.map((photo) => (
                  <div
                    key={photo.id}
                    className="relative rounded-lg overflow-hidden mb-4">
                    <Image
                      src={photo.fileorg_url}
                      alt=""
                      className="rounded-lg object-cover"
                      width={200}
                      height={100}
                      style={{
                        width: "100%",
                        height: "auto",
                      }}
                      onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
                    />
                    <DropDownMenu
                      className="absolute top-[6px] right-[6px] z-20"
                      menu={{ items, className: classNames("w-48", CustomDropDownMenuCss) }}
                      onOpenChange={(open) => handleOpenChange(open, photo)}
                    />
                    <button
                      type="button"
                      className="absolute top-0 left-0 w-full h-full z-10"
                      onClick={() => {
                        setImageSelected(photo)
                        setOpenDetail(true)
                      }}></button>
                  </div>
                ))}
              </div>

              <LoadMoreInfinite
                isLoading={loadingPhoto}
                isNextPage={isNextPage}
                hasNextPage={hasNextPage}
                fetchNextPage={fetchNextPage}
              />
            </>
          ) : (
            <NotFoundBox
              className="!bg-[white)] py-8"
              backHome={false}
              message="We found nothing here"
              slot={
                albumSelected ? (
                  <button
                    type="button"
                    onClick={() => {
                      setAddPhoto(true)
                      setImageSelected(null)
                    }}
                    className="text-center inline-block w-full underline font-medium lg:text-lg">
                    Add photos to album
                  </button>
                ) : null
              }
            />
          )}
        </div>
      </div>
      <PhotoDetail
        isOpen={openDetail}
        photo={imageSelected}
        setOpen={setOpenDetail}
        album={dataPhoto || []}
      />
      <FormAlbum
        type="photo"
        isOpen={formAlbum}
        album={albumSelected}
        setOpen={setFormAlbum}
        onSuccess={() => {
          setFormAlbum((pre) => !pre)
          refetchAlbums()
        }}
      />
      <FormPhoto
        isOpen={addPhoto}
        setOpen={setAddPhoto}
        photo={imageSelected}
        album={albumSelected}
        onSuccess={() => {
          setAddPhoto((pre) => !pre)
          refetchAlbums()
          queryClient.invalidateQueries({ queryKey: ["photo.get_list_photos", albumSelected?.id] })
        }}
      />
      <PhotoShare
        isOpen={openShare}
        setOpen={setOpenShare}
        photo={imageSelected}
        type="photo"
      />
    </div>
  )
}