"use client"

import { faPlus } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useEffect, useMemo, useState } from "react"
import { CustomDropDownMenuCss, DropDownMenu } from "../Common/DropDownMenu"
import classNames from "classnames"
import { useTranslations } from "next-intl"
import FormAlbum from "./FormAlbum"
import NotFoundBox from "../Notfound"
import FormPhoto from "./FormPhoto"
import PhotoShare from "./PhotoShare"
import VideoDetail from "./VideoDetail"
import SwiperMedia from "./SwiperMedia"
import ReactPlayer from "react-player"
import { IAlbum } from "@/type/Media"
import { useDeleteVideo, useDeleteVideoAlbum, useGetAlbums, useGetVideoInAlbums, useShareAlbumVideo } from "@/hook/useVideo"
import { useNotificationContext } from "../Layout/NotificationContext"
import { renderLabelItem } from "@component/Common/LabelItem"
import { LoadingBox } from "../Common/LoadingBox"
import { useDownload } from "@/hook/useCommon"
import { flattenDeep } from "lodash"
import { useQueryClient } from "@tanstack/react-query"
import { LoadMoreInfinite } from "../Common/LoadMoreInfinite"
import { useSearchParams } from "next/navigation"

export default function VideoContent() {
  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 [addVideo, setAddVideo] = useState(false)
  const [videoSelected, setVideoSelected] = useState<any>(null)
  const [openDetail, setOpenDetail] = useState(false)
  const [openShare, setOpenShare] = useState(false)
  const [albumSelected, setAlbumSelected] = useState<any>(null)
  const [formAlbum, setFormAlbum] = useState(false)
  const [keySelectMedia, setKeySelectMedia] = useState<any>("")
  const [isNextPage, setIsNextPage] = useState(true)

  const { data: dataSource, refetch: refetchAlbums, isLoading: loadingAlbum } = useGetAlbums({ pageSize: 50, pageNum: 1 })
  const deleteVideoAlbum = useDeleteVideoAlbum()
  const deleteVideo = useDeleteVideo()
  const shareAlbumVideo = useShareAlbumVideo()
  const { data, isLoading: loadingVideo, fetchNextPage, hasNextPage, isFetchingNextPage } = useGetVideoInAlbums(albumSelected?.id, Boolean(albumSelected?.id))

  const dataVideo = useMemo(
    () => (flattenDeep(data?.pages.map((e: any) => e.data!)).length > 0 ? flattenDeep(data?.pages.map((e: any) => e?.data?.data?.videos)) : []),
    [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])

  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 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: () => setAddVideo(true),
    },
    {
      label: renderLabelItem(transGeneral("download"), "/img/icon/download_outline.svg", transGeneral("download")),
      key: "2",
      onClick: () => handleDownloadVideo(),
    },
    // {
    //   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: () => handleDeleteVideo(videoSelected),
    },
  ]

  const handleOpenChange = (open: boolean, video: any) => {
    if (open) {
      setVideoSelected(video)
    }
  }

  const handleDownloadVideo = () => {
    handleDownload(videoSelected?.file || videoSelected?.fileorg_url, videoSelected?.title)
  }

  const handleDeleteAlbum = (album: IAlbum) => {
    if (album.id === albumSelected?.id) {
      setAlbumSelected(null)
    }
    deleteVideoAlbum
      .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 handleDeleteVideo = (video: any) => {
    deleteVideo
      .mutateAsync(video.id)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: "Delete video successfully",
        })
        refetchAlbums()
        queryClient.invalidateQueries({ queryKey: ["video.get_list_videos", albumSelected?.id] })
      })
      .catch((errors) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data?.msgs || transMessage("fail"),
        })
      })
  }

  const handleShare = (album: string, user: string) => {
    shareAlbumVideo
      .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={() => {
          setAlbumSelected(null)
          setFormAlbum(true)
        }}
        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 Video</h2>
          {albumSelected ? (
            <button
              type="button"
              onClick={() => {
                setAddVideo(true)
                setVideoSelected(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 Video</span>
            </button>
          ) : null}
        </div>
        <div className="px-4 py-6 grow">
          {loadingVideo ? (
            <LoadingBox icon="/img/gif/Media.gif" />
          ) : dataVideo && dataVideo?.length ? (
            <>
              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                {dataVideo?.map((video) => (
                  <div
                    key={video.id}
                    className="relative rounded-lg overflow-hidden aspect-video">
                    <ReactPlayer
                      url={video?.file}
                      playing={false}
                      width="320"
                      height="160"
                      loop={false}
                    />
                    <DropDownMenu
                      className="absolute top-[6px] right-[6px] z-20"
                      menu={{ items, className: classNames("w-48", CustomDropDownMenuCss) }}
                      onOpenChange={(open) => handleOpenChange(open, video)}
                    />
                    <button
                      type="button"
                      className="absolute top-0 left-0 w-full h-full z-10"
                      onClick={() => {
                        setVideoSelected(video)
                        setOpenDetail(true)
                      }}></button>
                    <div className="bg-[rgba(0,0,0,0.8)] text-white absolute bottom-0 right-0 w-full z-10 py-2 px-2">
                      <p className="text-xs font-semibold line-clamp-1">{video.title}</p>
                      <p className="text-[10px] line-clamp-1">{video.fileorg_name}</p>
                    </div>
                    <p className="bg-[rgba(0,0,0,0.6)] text-white text-xs absolute top-2 left-2 z-10 rounded-2xl py-0.5 px-2">{video.duration}</p>
                  </div>
                ))}
              </div>
              <LoadMoreInfinite
                isLoading={loadingVideo}
                isNextPage={isNextPage}
                hasNextPage={hasNextPage}
                fetchNextPage={fetchNextPage}
              />
            </>
          ) : (
            <NotFoundBox
              className="!bg-white py-8"
              backHome={false}
              message="We found nothing here"
              slot={
                <button
                  type="button"
                  onClick={() => {
                    setAddVideo(true)
                    setVideoSelected(null)
                  }}
                  className="text-center inline-block w-full underline font-medium lg:text-lg">
                  Add video to album
                </button>
              }
            />
          )}
        </div>
      </div>
      <FormAlbum
        type="video"
        isOpen={formAlbum}
        album={albumSelected}
        setOpen={setFormAlbum}
        onSuccess={() => {
          setFormAlbum((pre) => !pre)
          refetchAlbums()
        }}
      />
      <FormPhoto
        isOpen={addVideo}
        setOpen={setAddVideo}
        video={videoSelected}
        album={albumSelected}
        type="video"
        onSuccess={() => {
          setAddVideo((pre) => !pre)
          refetchAlbums()
          queryClient.invalidateQueries({ queryKey: ["video.get_list_videos", albumSelected?.id] })
        }}
      />
      <PhotoShare
        isOpen={openShare}
        setOpen={setOpenShare}
        video={videoSelected}
        type="video"
      />
      <VideoDetail
        isOpen={openDetail}
        video={videoSelected}
        setOpen={setOpenDetail}
        listVideo={dataVideo || []}
      />
    </div>
  )
}