import { useContext, useState } from 'react';
import { Trash2 } from 'lucide-react';
import AttachmentPreview from './AttachmentPreview.tsx';
import { ChatMessagesProps } from '@/types/types.ts';
import { useChat } from '@/context/chat/useChat.ts';
import { AuthContext } from '@/utils/AuthProvider.tsx';

type AnimatedMessageProps = {
  message: ChatMessagesProps;
  onDelete: (messageId: number) => void;
};

const AnimatedMessage = ({ onDelete, message }: AnimatedMessageProps) => {
  const { user } = useContext(AuthContext);
  const { me, groupOwner } = useChat();
  const [isRemoving, setIsRemoving] = useState(false);

  const handleDelete = () => {
    setIsRemoving(true);
    setTimeout(() => {
      onDelete(message.message_id);
    }, 300);
  };

  return (
    <li
      className={` whitespace-pre-wrap ml-2 rounded-lg p-1 group hover:bg-zinc-900
       ${isRemoving ? 'transition-all duration-300 opacity-0 -translate-x-full' : 'opacity-100'}`}
    >
      <div className="flex items-center justify-between">
        <div className="max-w-full">
          <span
            title={`${new Intl.DateTimeFormat('en-GB', {
              timeStyle: 'medium',
              dateStyle: 'short',
            })?.format(message.sent_at)}`}
          >
            {message.sender}: {message.message}
          </span>
          {message.attachment_urls && (
            <div className="mt-2 flex flex-col gap-2 max-w-full">
              {message.attachment_urls?.length > 0
                ? message.attachment_urls.map((url, index) => (
                    <AttachmentPreview
                      key={`${message.message_id}-${index}`}
                      url={url}
                    />
                  ))
                : null}
            </div>
          )}
        </div>
        {me.isGroupOwner ||
        message.sender == user?.username ||
        (me.isGroupAdmin &&
          me.isGroupOwner &&
          message.sender_id !== groupOwner) ? (
          <Trash2
            className="opacity-0 group-hover:opacity-100 h-5 w-5 ml-2 flex-shrink-0 cursor-pointer text-gray-400 hover:text-red-500 transition-colors duration-200"
            onClick={handleDelete}
          />
        ) : null}
      </div>
    </li>
  );
};

export default AnimatedMessage;
