import { useNavigate } from "react-router-dom";
import styles from "./styles.module.scss";
import Title from "@/components/Title";
import ProgressBarLine from "@/components/ui/ProgressBarLine";
import { useEffect, useState } from "react";
import routes from "@/routes";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

const points = [
  "/connecting.step_1",
  "/connecting.step_2",
  "/connecting.step_3",
  "/connecting.step_4",
];

const animationDuration = points.length * 2000;

function Connecting() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const assistant = useSelector(selectors.selectCurrentAssistant);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    setProgress(100);
    const timeOut = setTimeout(() => {
      navigate(routes.client.chatsExpert());
    }, animationDuration + 2000);

    return () => clearTimeout(timeOut);
  }, [navigate]);

  return (
    <section className={styles.container}>
      <Title variant="h2" className={styles.title}>
        {translate("/connecting.title", {
          name: assistant?.name,
        })}
      </Title>
      <div className={styles.avatar}>
        <img src={assistant?.image} alt={assistant?.name} />
      </div>
      <Title variant="h3" className={styles.subtitle}>
        {translate("/connecting.name_guide", {
          name: assistant?.name,
        })}
      </Title>
      <ProgressBarLine
        containerClassName={styles["progress-bar"]}
        lineColor="var(--primary-600)"
        value={progress}
        delay={animationDuration}
      />
      <div className={styles.points}>
        {points.map((point, index) => (
          <div
            className={styles.point}
            key={index}
            style={{
              animationDelay: `${
                ((index + 1) * animationDuration) / points.length
              }ms`,
            }}
          >
            <div className={styles.icon} />
            {translate(point)}
          </div>
        ))}
      </div>
    </section>
  );
}

export default Connecting;
