"use client"

import React, { Dispatch, useEffect, useState } from "react"
import { Button } from "antd"
import { useTranslations } from "next-intl"
import classNames from "classnames"
import { Swiper, SwiperSlide } from "swiper/react"
import "swiper/css"
import "swiper/css/navigation"
import { Mousewheel, Navigation } from "swiper/modules"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faPlus, faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons"
import { SwiperCss } from "../Music/List/style"
import Image from "next/image"
import { numberFormatter } from "@/util/Common"
import { floor } from "lodash"
import { CustomDropDownMenuCss, DropDownMenu } from "../Common/DropDownMenu"
import NotFoundBox from "../Notfound"
import { renderLabelItem } from "@component/Common/LabelItem"
import { LoadingBox } from "../Common/LoadingBox"
import AlbumShare from "../Common/AlbumShare"

type IProps = {
  dataSource: Array<any>
  albumSelected: any
  isLoading?: boolean
  userShares: string[]
  onAddAlbum: (value: boolean) => void
  onEditAlbum: (value: any) => void
  onSelectAlbum: (value: any) => void
  onDeleteAlbum: (value: any) => void
  keySelectMedia?: any
  setKeySelectMedia?: Dispatch<any>
  onShare: (album: string, user: string) => void
}

export default function SwiperMedia({
  dataSource,
  albumSelected,
  isLoading,
  onAddAlbum,
  onEditAlbum,
  onSelectAlbum,
  onDeleteAlbum,
  keySelectMedia,
  userShares,
  setKeySelectMedia,
  onShare,
}: IProps) {
  const trans = useTranslations("music")
  const transButton = useTranslations("button")
  const transBook = useTranslations("book")

  const [swiperRef, setSwiperRef] = useState(null as any)
  const [itemSlide, setItemSlide] = useState(2)
  const [showPrev, setShowPrev] = useState(false)
  const [loading, setLoading] = useState(true)
  const [openShare, setOpenShare] = useState(false)

  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    }, 300)
  }, [])

  const items = [
    {
      label: renderLabelItem(transBook("edit"), "/img/icon/edit.svg", "edit"),
      key: "1",
      onClick: () => handleEditItem(),
    },
    {
      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: () => handleDeleteItem(),
    },
  ]

  const swiperMargin = showPrev ? "!mx-5 md:!mx-8 lg:!mx-[2.375rem]" : "!mr-5 md:!mr-8 lg:!mr-[2.375rem]"

  const handleSlideChange = (swiper: any) => {
    setShowPrev(swiper.activeIndex > 0)
  }

  const prevHandler = () => {
    swiperRef.slidePrev()
  }

  const nextHandler = () => {
    swiperRef.slideNext()
  }

  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth

      switch (true) {
        case width >= 1280:
          setItemSlide(floor(width / 176))
          break
        case width >= 768:
          setItemSlide(3)
          break
        default:
          setItemSlide(2)
      }
    }

    handleResize()

    window.addEventListener("resize", handleResize)

    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [])

  const handleOpenChange = (open: boolean, item: any) => {
    setKeySelectMedia && setKeySelectMedia((prevId: any) => (prevId === item?.id || !open ? null : item?.id))
    if (open) {
      onSelectAlbum(item)
    }
  }

  const handleEditItem = () => {
    onEditAlbum(albumSelected)
  }

  const handleDeleteItem = () => {
    onDeleteAlbum(albumSelected)
  }

  const handleShare = (album: string, user: string) => {
    onShare(album, user)
  }

  return loading || (isLoading && !dataSource.length) ? (
    <div className="bg-gray-200 rounded-lg animate-pulse h-32 mb-6">
      <LoadingBox />
    </div>
  ) : (
    <div className="flex items-center mb-6">
      {dataSource.length ? (
        <div className="relative flex overflow-hidden mb-3 xs:mb-0 grow">
          {dataSource.length > itemSlide && (
            <>
              <button
                aria-label="prev"
                onClick={prevHandler}
                className={classNames(
                  `cursor-pointer flex text-[var(--secondary-100)] bg-[var(--primary--20)] shadow-xl h-full w-5 md:w-8 lg:w-[2.375rem] border-none z-30 transition-opacity duration-300 ease-in-out items-center justify-center absolute text-center left-0 my-auto text-[16px] shadow-gray-500/50 top-0 ${
                    showPrev ? "opacity-100" : "opacity-0 pointer-events-none"
                  }`,
                )}>
                <FontAwesomeIcon
                  icon={faChevronLeft}
                  className="max-h-[16px]"
                />
              </button>
              <button
                aria-label="next"
                onClick={nextHandler}
                className={classNames(
                  "cursor-pointer flex text-[var(--secondary-100)] bg-[var(--primary--20)] shadow-xl h-full w-5 md:w-8 lg:w-[2.375rem] border-none z-30 transition-opacity duration-300 ease-in-out items-center justify-center absolute text-center right-0 my-auto text-[16px] shadow-gray-500/50 top-0",
                )}>
                <FontAwesomeIcon
                  icon={faChevronRight}
                  className="max-h-[16px]"
                />
              </button>
            </>
          )}
          <Swiper
            breakpoints={{
              992: {
                spaceBetween: 12,
              },
              1280: {
                spaceBetween: 16,
              },
            }}
            slidesPerView="auto"
            spaceBetween={8}
            mousewheel={{
              forceToAxis: true,
              releaseOnEdges: true,
              sensitivity: 0,
            }}
            onSwiper={(swiper: any) => setSwiperRef(swiper)}
            navigation={true}
            onSlideChange={handleSlideChange}
            onInit={handleSlideChange}
            modules={[Navigation, Mousewheel]}
            className={classNames(`flex flex-1 transition-all duration-300 ease-in-out ${swiperMargin}`, SwiperCss)}>
            {dataSource?.map((item) => (
              <SwiperSlide
                key={item?.id}
                className={`relative !w-40 border-4 rounded-lg overflow-hidden group ${
                  albumSelected?.id === item.id ? "border-[var(--primary--70)]" : "border-transparent"
                }`}>
                <div className="h-32">
                  <Image
                    src={item.cover || "/img/default_image.jpg"}
                    alt={item.title}
                    width={157}
                    height={130}
                    style={{
                      width: "100%",
                      height: "100%",
                    }}
                    className="aspect-[4/1] object-cover"
                    onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
                  />
                </div>
                <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-[rgba(0,0,0,0.8)] to-[rgba(255,255,255,0)] pb-3 px-3 text-white pt-2">
                  <p className="font-semibold line-clamp-1">{item.title}</p>
                  <p className="">{item?.items_num ? numberFormatter(item.items_num, ".") : 0}</p>
                </div>
                <DropDownMenu
                  className="absolute top-[6px] right-[6px] z-20 hidden group-hover:flex"
                  menu={{ items, className: classNames("w-48", CustomDropDownMenuCss) }}
                  onOpenChange={(open) => handleOpenChange(open, item)}
                  open={keySelectMedia === item?.id}
                />
                <button
                  type="button"
                  className="absolute top-0 left-0 w-full h-full z-10"
                  onClick={() => {
                    onSelectAlbum(item)
                  }}></button>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      ) : (
        <div className="mb-3 xs:mb-0 grow h-32">
          <NotFoundBox
            backHome={false}
            classBox="p-0 h-full"
            classImage="h-[70%]"
            classMess="!mt-2"
          />
        </div>
      )}

      <div className="xs:ml-4 w-full xs:w-[4.5rem] md:w-[7.5rem] lg:w-[10.5rem] h-full">
        <Button
          type="dashed"
          onClick={() => {
            onAddAlbum(true)
          }}
          className={`w-full xs:w-[4.5rem] md:w-[7.5rem] lg:w-[10.5rem] !h-full !flex flex-col text-base leading-[22px] font-normal text-[var(--secondary-100)]`}>
          <FontAwesomeIcon
            icon={faPlus}
            className="text-2xl"
          />
          <span className="break-words whitespace-normal">{trans("news_albums")}</span>
        </Button>
      </div>
      <AlbumShare
        isOpen={openShare}
        album={albumSelected}
        userShares={userShares}
        setOpen={setOpenShare}
        onShare={handleShare}
        imageClassName="aspect-[3/2]"
      />
    </div>
  )
}