"use client"

import { Avatar, Drawer } from "antd"
import classNames from "classnames"
import Image from "next/image"
import { useGetContacts } from "@/hook/useContacts"
import { useEffect, useState } from "react"
import { PAGINATION } from "@/config/constant"
import { DrawerCss } from "@/component/Calendar/style"
import { useGetProfile } from "@/hook/useAuth"
import { lowerCase } from "lodash"

type IProps = {
  isOpen: boolean
  album: any
  userShares: string[]
  imageClassName?: string
  setOpen: (value: boolean) => void
  onShare: (album: string, user: string) => void
}

export default function AlbumShare({ isOpen, album, userShares, imageClassName, setOpen, onShare }: IProps) {
  const [page, setPage] = useState(1)
  const [totalPage, setTotalPage] = useState(0)
  const [query, setQuery] = useState<any>({
    pageNum: page,
    pageSize: PAGINATION.DEFAULT_PAGE_SIZE,
  })
  const [contacts, setContacts] = useState<any>([])
  const { data: dataContact, isLoading } = useGetContacts(query)
  const { data: user } = useGetProfile()

  const handleScroll = (e: any) => {
    const { scrollTop, scrollHeight, clientHeight } = e.target
    if (scrollTop + clientHeight >= scrollHeight - 20) {
      if (contacts.length < totalPage && !isLoading) {
        setPage(page + 1)
        setQuery({ ...query, pageNum: page + 1 })
      }
    }
  }

  useEffect(() => {
    if (dataContact) {
      if (page === 1) setContacts(dataContact?.data?.data?.contacts)
      else setContacts((pre: any) => [...pre, ...dataContact?.data?.data?.contacts])
      setTotalPage(dataContact?.data?.data?.total_pages)
    }
  }, [dataContact])

  const handleShare = (user: any) => {
    onShare(album?.id, user.uid)
  }

  return (
    <Drawer
      className={classNames(``, DrawerCss)}
      closable
      destroyOnClose
      title={<p>Share Album</p>}
      placement="right"
      open={isOpen}
      onClose={() => setOpen(false)}
      width={594}>
      <div className="h-full flex flex-col">
        <div className="relative mb-2 inline-block w-fit">
          <div className="min-h-60 inline-block">
            <Image
              alt=""
              src={album?.cover || "/img/default_image.jpg"}
              width={370}
              height={276}
              onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
              className={`max-w-full max-h-full rounded-lg object-cover ${imageClassName}`}
            />
          </div>
          <div className="absolute bottom-0.5 left-0 w-full bg-gradient-to-t from-[rgba(0,0,0,0.8)] to-[rgba(255,255,255,0)] pb-4 px-4 md:px-6 rounded-lg text-white pt-2">
            <p className="text-xs">{album?.title}</p>
          </div>
        </div>
        <ul
          className="grow overflow-y-auto"
          onScroll={handleScroll}>
          {contacts.map((item: any, index: number) => (
            <li
              key={index}
              className="relative flex items-center justify-between py-4 border-b border-[var(--secondary-20)] last:border-b-0">
              <div className="flex items-center gap-4">
                <Avatar
                  size={42}
                  style={{ backgroundColor: "#db9a1d", color: "#fff" }}>
                  {item?.name.charAt(0)}
                </Avatar>
                <p className="font-semibold">{item.name}</p>
              </div>
              {user?.data && lowerCase(user?.data?.username) === item.uid ? (
                <p />
              ) : userShares.includes(String(item.uid)) ? (
                <p className="text-xs font-bold text-[var(--success-80)]">Shared</p>
              ) : (
                <button
                  type="button"
                  onClick={() => handleShare(item)}
                  className="group">
                  <Image
                    src="/img/icon/redo.svg"
                    alt="share"
                    width={24}
                    height={24}
                    className="group-hover:hidden"
                  />
                  <Image
                    src="/img/icon/redo_yellow.svg"
                    alt="share"
                    width={24}
                    height={24}
                    className="hidden group-hover:block"
                  />
                </button>
              )}
            </li>
          ))}
        </ul>
      </div>
    </Drawer>
  )
}