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 = 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>
  ));

  return (
    <Swiper
      loop={true}
      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 && swiperProjects}
    </Swiper>
  );
};

export default ProjectsSwiper;
