import React, { useEffect, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// import required modules
import { Pagination, Navigation } from "swiper";
import useScreenSize from "use-screen-size";

import img from "./images/Architecture1.png";
import img1 from "./images/Floor1.png";
import img2 from "./images/Infrastructure1.png";
import img3 from "./images/Outside.png";
import "./swiper.css";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "../calendar/calendar";

type propsTypes = {
  slidesPerView: string;
  centeredSlides: boolean;
  spaceBetween: number;
  modules: Array<any>;
  className: string;
  children: React.ReactNode;
  rewind: boolean;
  text: any;
  slideToClickedSlide: boolean,
};

export default function SwiperCentred(props: propsTypes) {
  const size = useScreenSize();
  const [caption, setCaption] = useState<any>();

  useEffect(() => {
    setCaption(props.text.subtitle1);
  }, [props.text]);

  function updateCaption() {
    const slide = document
      .querySelector(".image__slider_active")
      ?.getAttribute("data-caption");
    setCaption(slide);
  }

  function swiperWidth() {
    if (size.width > 1600) {
      return {
        width: "644px",
        height: "514px",
      };
    } else if (size.width > 640) {
      return { width: "536px", height: "428px" };
    } else {
      return {  width: "290px", height: "232px" };

    }
  }


  return (
    <div className="swiper-container">
      <Swiper
        centeredSlides={size.width > 1024 ? true : false}
        spaceBetween={size.width > 640 ? 20 : 10}
        initialSlide={1}
        slideToClickedSlide={true}
        slidesPerView={'auto'}
        loop={true}
        loopedSlides={3}
        onSlideChangeTransitionEnd={updateCaption}
        modules={[Navigation, Pagination]}
        navigation={{
          nextEl: ".button_next",
          prevEl: ".button_prev",
        }}
        pagination={{
          el: ".container1",
          type: "fraction",
        }}
      >
        <SwiperSlide style={swiperWidth()}>
          {({ isActive }) => (
            <img
              data-caption={props.text.subtitle}
              className={isActive ? "image__slider_active" : "image__slider"}
              src={img1}
              alt="slide"
            />
          )}
        </SwiperSlide>
        <SwiperSlide style={swiperWidth()}>
          {({ isActive }) => (
            <img
              data-caption={props.text.subtitle1}
              className={isActive ? "image__slider_active" : "image__slider"}
              src={img}
              alt="slide"
            />
          )}
        </SwiperSlide>
        <SwiperSlide style={swiperWidth()}>
          {({ isActive }) => (
            <img
              data-caption={props.text.subtitle2}
              className={isActive ? "image__slider_active" : "image__slider"}
              src={img2}
              alt="slide"
            />
          )}
        </SwiperSlide>
        <SwiperSlide style={swiperWidth()}>
          {({ isActive }) => (
            <img
              data-caption={props.text.subtitle3}
              className={isActive ? "image__slider_active" : "image__slider"}
              src={img3}
              alt="slide"
            />
          )}
        </SwiperSlide>
        <div className="slider__info">
          <div className="button__container">
            <div className="container">
              <div className="button__arrow_l button_prev"></div>
              <div className="button__arrow_r button_next"></div>
            </div>
            <div className="pagination__container">
              <p className="swiper__caption">{caption}</p>
              <div className="container1">
                <p className="swiper__caption"></p>
              </div>
            </div>
          </div>
        </div>
      </Swiper>
    </div>
  );
}
