import React, { useEffect } from "react";
import styles from "./styles.module.css";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

interface IMessageProps {
  text: string | React.ReactNode;
  isSelf: boolean;
  advisorName?: string;
  avatar?: string;
  backgroundTextColor?: string;
  textColor?: string;
  isVisible?: boolean;
  messageId?: string;
  isRead?: boolean;
  isBlur?: boolean;
  readMessage?: (messagesId: string[]) => void;
  onClickBlur?: () => void;
}

// eslint-disable-next-line react-refresh/only-export-components
function Message({
  text,
  avatar,
  isSelf,
  advisorName = "Advisor",
  backgroundTextColor = "#0080ff",
  textColor = "#fff",
  isVisible = true,
  messageId,
  isRead,
  isBlur = false,
  readMessage,
  onClickBlur,
}: IMessageProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);

  useEffect(() => {
    if (!messageId || !readMessage || isRead) return;
    readMessage([messageId]);
  }, [isRead, messageId, readMessage]);

  if (!isVisible) return <></>;

  return (
    <div
      className={`${styles.container} ${isSelf && styles.self}`}
      style={{ flexDirection: isSelf ? "row-reverse" : "row" }}
    >
      {!isSelf && avatar?.length && (
        <img
          className={styles.avatar}
          src={avatar}
          alt={`${advisorName} avatar`}
        />
      )}
      <div
        className={styles.text}
        style={{ color: textColor, backgroundColor: backgroundTextColor }}
      >
        {text}
        {isBlur && (
          <div className={styles["blur-element"]}>
            <span onClick={onClickBlur}>{translate("/expert.see_answer")}</span>
          </div>
        )}
      </div>
    </div>
  );
}

// eslint-disable-next-line react-refresh/only-export-components
export default React.memo(Message);
