import React, { useState } from "react";
import "./swiper.style.scss";

import { useTranslation } from "react-i18next";

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import SwiperCore, { EffectCoverflow, Pagination } from "swiper";
import { Autoplay } from "swiper";

SwiperCore.use([EffectCoverflow, Pagination]);

const getImage = (image) => {
  return require(`../../assets/images/main/projects/${image}`).default;
};

const ProjectsSwiper = () => {
  const { t } = useTranslation();
  const [activeSlide, setSlide] = useState("");

  const projects = t("projects", { returnObjects: true });

  // const swiperProjects = ;

  return (
    <Swiper
      loop={true}
      loopAdditionalSlides={5}
      autoplay={{
        delay: 2500,
        disableOnInteraction: true,
      }}
      speed={1200}
      effect={"coverflow"}
      coverflowEffect={{
        scale: 1,
        rotate: 0,
        stretch: 100,
        depth: 500,
        modifier: 1,
        slideShadows: false,
      }}
      centeredSlides={true}
      slideToClickedSlide={true}
      onSlideChange={(swiper) => {
        setSlide(swiper.realIndex);
      }}
      breakpoints={{
        0: {
          slidesPerView: 1,
        },
        1200: {
          slidesPerView: 2,
        },
      }}
      onSwiper={(swiper) => {
        console.log(swiper);
      }}
      modules={[Autoplay]}
      id={`active-slide-${activeSlide}`}
      key={`our-swiper`}
    >
      {projects &&
        projects.map((project, i) => (
          <SwiperSlide key={`swiper-${i}`}>
            <h2>{project.title}</h2>
            <div className="img-wrap">
              <img src={getImage(project.image)} alt="inflid" />
            </div>
            <div className="project-info">
              <div>
                {project.info.map((info, i) => (
                  <p key={`slide-info-${i}`}>{info}</p>
                ))}
              </div>
              <p>{project.text}</p>
            </div>
          </SwiperSlide>
        ))}
    </Swiper>
  );
};

export default ProjectsSwiper;