import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";
import "swiper/css/navigation";

import style from "./customerReviewSlider.module.css";

import { Navigation, Pagination, Autoplay } from "swiper";
import { ArrowBackIos, ArrowForwardIos, Star } from "@mui/icons-material";
import { useEffect, useState, useMemo } from "react";
import { customerApi } from "@/api/api";

export default function MainSlider(props) {
  const [randomID] = useState("id_" + Math.floor(Math.random() * 1000000 + 1));
  const ForwardBtn = () => {
    return (
      <ArrowForwardIos
        className={`swiper-button-next-${randomID} ${style.btn_next}`}
      />
    );
  };
  const BackBtn = () => {
    return (
      <ArrowBackIos
        className={`swiper-button-prev-${randomID} ${style.btn_prev}`}
      />
    );
  };

  const [data, setData] = useState([]);

  const loadReviews = async (ctx) => {
    await Promise.all([
      customerApi.get("/site/contents?group_code=review_section"),
    ]).then((res) => {
      console.log("res.data, ", res[0].data);
      let newObject = { ...res[0].data.result };
      if (
        newObject &&
        newObject["reviews"] &&
        newObject["reviews"].content &&
        newObject["reviews"].content.length > 0
      ) {
        for (const item of newObject["reviews"].content) {
          let name = item.split("name[")[1].split("]")[0];
          let rating = item.split("rating[")[1].split("]")[0];
          let message = item.split("message[")[1].split("]")[0];
          setData((prev) => {
            let newArray = [...prev];
            newArray.push({
              name: name,
              rating: Number(rating),
              message: message
                .replaceAll("<p>", "")
                .replaceAll("</p>", "")
                .replaceAll("<br>", ""),
            });
            return newArray;
          });
        }
      }
    });
  };

  useMemo(() => {
    loadReviews();
  }, []);

  return (
    data.length > 0 && (
      <>
        <div className={style.review_main_section}>
          {props.title && (
            <div className={`primary-heading ${style.heading}`}>
              {props.title}
            </div>
          )}
          <div className={style.review_section}>
            <BackBtn />
            <Swiper
              pagination={{
                clickable: true,
              }}
              modules={[Navigation, Autoplay]}
              spaceBetween={30}
              centeredSlides={true}
              autoplay={{ delay: 10000, disableOnInteraction: false }}
              speed={800}
              loop={true}
              className={style.mySwiper}
              navigation={{
                nextEl: ".swiper-button-next-" + randomID,
                prevEl: ".swiper-button-prev-" + randomID,
              }}
            >
              {data.map((item, index) => (
                <SwiperSlide className={style["swiper-slide"]} key={index}>
                  <div className={style.review_text_section}>
                    <div className={style.review_text}>
                      <q>{item.message}</q>
                    </div>
                    <div className={style.rating}>
                      {[...Array(item.rating)].map(() => (
                        <>
                          <Star />
                        </>
                      ))}
                    </div>
                    <div className={style.by_text}>by {item.name}</div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
            <ForwardBtn />
          </div>
        </div>
      </>
    )
  );
}
