import { useTranslations } from "next-intl";

import { Icon, IconName, Typography } from "@/components/ui";

import styles from "./LastMessagePreview.module.scss";

export interface LastMessagePreviewProps {
  message: {
    type: "text" | "voice" | "image";
    content?: string;
    sentWithZeroBalance?: boolean;
  };
  isTyping?: boolean;
  isRead?: boolean;
  currentBalance?: number;
}

export default function LastMessagePreview({
  message,
  isTyping,
  isRead,
  currentBalance = 0,
}: LastMessagePreviewProps) {
  const t = useTranslations("Chat");

  // Определяем нужно ли блюрить сообщение
  const shouldBlur =
    message.sentWithZeroBalance === true && currentBalance <= 0;

  const getMessageIcon = () => {
    switch (message.type) {
      case "voice":
        return IconName.Microphone;
      case "image":
        return IconName.Image;
      default:
        return null;
    }
  };

  const getMessageText = () => {
    switch (message.type) {
      case "voice":
        return t("voice_message");
      case "image":
        return t("photo");
      default:
        return message.content;
    }
  };

  if (isTyping) {
    return (
      <Typography size="sm" color="secondary" className={styles.text}>
        {t("typing")}
      </Typography>
    );
  }

  const messageIcon = getMessageIcon();

  return (
    <div className={styles.messagePreview}>
      {isRead && (
        <Icon
          name={IconName.ReadStatus}
          color="#10B981"
          size={{ width: 14, height: 14 }}
        />
      )}
      {messageIcon && (
        <Icon
          name={messageIcon}
          color="#6B7280"
          size={{ width: 14, height: 14 }}
        />
      )}
      <Typography
        size="sm"
        color="secondary"
        align="left"
        className={`${styles.text} ${shouldBlur ? styles.blurred : ""}`}
      >
        {getMessageText()}
      </Typography>
    </div>
  );
}
