"use client"

import { Drawer } from "antd"
import classNames from "classnames"
import { DrawerCss } from "../Calendar/style"
import Image from "next/image"
import dayjs from "dayjs"
import { formatFileSize } from "@/util/Common"
import { Swiper, SwiperSlide } from "swiper/react"
import { Mousewheel, Navigation } from "swiper/modules"
import "swiper/css"
import "swiper/css/navigation"
import { useEffect, useState } from "react"
import { css } from "@emotion/css"

type IProps = {
  photo: any
  isOpen: boolean
  album: any[]
  setOpen: (value: boolean) => void
}

export default function PhotoDetail({ photo, isOpen, album, setOpen }: IProps) {
  const [swiperRef, setSwiperRef] = useState(null as any)
  
  const customButtonCss = css`
    .swiper {
      height: 100%;
    } 
    .swiper-button-next,
    .swiper-button-prev {
      &:after {
        color: var(--primary--70);
      }
    }
  `

  return (
    <Drawer
      className={classNames(customButtonCss, DrawerCss)}
      closable
      destroyOnClose
      title={<p>Photo Info</p>}
      placement="right"
      open={isOpen}
      onClose={() => setOpen(false)}
      width={594}>
      <Swiper
        slidesPerView={1}
        mousewheel={{
          forceToAxis: true,
          releaseOnEdges: true,
          sensitivity: 0,
        }}
        onSwiper={(swiper: any) => setSwiperRef(swiper)}
        navigation={true}
        loop={album.length > 1 ? true : false}
        initialSlide={photo ? album.findIndex((item) => item.id === photo.id) : 0}
        modules={[Navigation, Mousewheel]}>
        {album.map((item) => (
          <SwiperSlide
            key={item.id}
            className="relative">
            <Image
              src={item?.file}
              alt="photo"
              width={627}
              height={839}
              className="rounded-lg w-full h-full lg:h-auto object-cover"
              onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
            />
            <div className="bg-gradient-to-t from-[rgba(0,0,0,0.8)] to-[rgba(255,255,255,0)] min-h-44 pb-4 px-4 md:px-6 absolute w-full left-0 bottom-0 text-white rounded-lg pt-2">
              <p className="font-bold text-base mb-2">{item?.title}</p>
              <p className="font-medium md:text-base">{item?.fileorg_name}</p>
              <div
                className="md:text-base mb-2"
                dangerouslySetInnerHTML={{ __html: item?.description }}></div>
              <p className="md:text-base">{formatFileSize(Number(item?.fileorg_size || 0))}</p>
              <p className="text-xs">{item.dimensions}</p>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </Drawer>
  )
}