/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
import React, { useState } from "react";
import Modal from "react-modal";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper/modules";

Modal.setAppElement("body");

function AdProfileContentPosts({ allImages }: { allImages: string[] }) {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
  const images = allImages?.map((post: any) => post);

  const openModal = (index: number) => {
    setSelectedImageIndex(index);
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setModalIsOpen(false);
  };

  return (
    <div className="grid grid-cols-3 overflow-y-auto max-h-[500px] my-3  gap-2 no-scrollbar">
 {allImages.map((item: string, index: number) => (
  <div
    key={index}
    className="relative aspect-square w-full rounded-xl  cursor-pointer overflow-hidden"
    onClick={() => openModal(index)}
  >
    <img
      alt="post"
      src={`${IMAGE_BASE_URL}${item}`}
      className="absolute inset-0 w-full h-full object-cover"
    />
  </div>
))}


      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 px-4  z-[9999999999]"
      >
        <div className="w-full max-w-2xl">
          <Swiper
            navigation
            modules={[Navigation]}
            initialSlide={selectedImageIndex}
          >
            {images.map((image, index) => (
              <SwiperSlide key={index}>
                <img
                  className="w-full h-auto rounded-xl"
                  src={`${IMAGE_BASE_URL}${image}`}
                  alt="Selected post"
                />
              </SwiperSlide>
            ))}
          </Swiper>
          <button
            className="absolute top-5 right-5 text-white mt-20 text-3xl"
            onClick={closeModal}
          >
            ×
          </button>
        </div>
      </Modal>
    </div>
  );
}

export default AdProfileContentPosts;
