import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import Button from "../../ui/Button";
import AppStoreReviews from "../../components/AppStoreReviews";
import Slider from "react-slick";
import { useRef, useState } from "react";
import Review2 from "../../components/Review2";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { reviewsByGoal } from "../../data/reviews";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function Reviews() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const slider = useRef<Slider>(null);
  const goal = useSelector(selectors.selectAnswers)?.goal;
  const [currentSlide, setCurrentSlide] = useState(0);

  const reviews = reviewsByGoal[goal] || reviewsByGoal.about_ex;

  const sliderSettings = {
    dots: false,
    infinite: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    // centerMode: true,
    arrows: false,
    beforeChange: (_current: number, next: number) => {
      setCurrentSlide(next);
    },
  };

  const handleNext = () => {
    navigate(routes.client.chatsQuizRelationshipStatus());
  };

  return (
    <section className={styles.container}>
      <AppStoreReviews />
      <Title className={styles.title} variant="h2">
        {translate("/reviews.title")}
      </Title>
      <Slider ref={slider} {...sliderSettings}>
        {reviews.map((review, index) => (
          <Review2 {...review} key={index} />
        ))}
      </Slider>
      <div className={styles["carousel-buttons"]}>
        <button
          disabled={currentSlide === 0}
          type="button"
          onClick={() => slider?.current?.slickPrev()}
        >
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              role="img"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              style={{ transform: "rotate(180deg)" }}
            >
              <title>Arrow pointing right</title>
              <path d="M2.5 9c-0.552 0-1 0.448-1 1s0.448 1 1 1v-2zM18.207 10.707c0.391-0.391 0.391-1.024 0-1.414l-6.364-6.364c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5.657 5.657-5.657 5.657c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l6.364-6.364zM2.5 11h15v-2h-15v2z"></path>
            </svg>
          </span>
        </button>
        <button
          disabled={currentSlide === reviews.length - 1}
          type="button"
          onClick={() => slider?.current?.slickNext()}
        >
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              role="img"
              width="20"
              height="20"
              viewBox="0 0 20 20"
            >
              <title>Arrow pointing right</title>
              <path d="M2.5 9c-0.552 0-1 0.448-1 1s0.448 1 1 1v-2zM18.207 10.707c0.391-0.391 0.391-1.024 0-1.414l-6.364-6.364c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5.657 5.657-5.657 5.657c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l6.364-6.364zM2.5 11h15v-2h-15v2z"></path>
            </svg>
          </span>
        </button>
      </div>
      <p className={styles.description}>{translate("/reviews.text")}</p>
      <div className={styles.footer}>
        <Button classNameContainer={styles.button} onClick={handleNext}>
          {translate("continue")}
        </Button>
      </div>
    </section>
  );
}

export default Reviews;
