import { useEffect, useState } from "react";
import styles from "./styles.module.scss";
import { images } from "../../data";
import { sleep } from "@/services/date";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

export interface IAnimateMessage {
  name: string;
  text: string;
  avatar: string;
}

interface AnimateMessagesProps {
  messages: IAnimateMessage[];
}

function AnimateMessages({ messages }: AnimateMessagesProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const [activeMessage, setActiveMessage] = useState(0);

  useEffect(() => {
    (async () => {
      await sleep(2000);
      setActiveMessage((activeMessage + 1) % messages.length);
    })();
  }, [activeMessage, messages.length]);

  return (
    <div className={styles.container}>
      <ul className={styles.list}>
        {messages.map(({ name, text, avatar }, index) => (
          <li
            className={`${styles.item} ${
              index === activeMessage && styles.active
            } ${index < activeMessage && styles["hide-up"]}`}
            key={index}
          >
            <img src={images(avatar)} alt={`${name} avatar`} />
            <div>
              <h4 className={styles.name}>{translate(name)}</h4>
              <p className={styles.text}>{translate(text)}</p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default AnimateMessages;
