import {useEffect, useState} from "react";
import type {RoomClient} from "@rmc/client";

type Message = {id: string; text: string};

export function ChatFeed({room}: {room: RoomClient}) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [status, setStatus] = useState("connecting");
  const [error, setError] = useState("");

  useEffect(() => {
    let active = true;
    setMessages([]);
    setError("");
    const subscription = room.subscribe({
      afterSeq: 0,
      selector: {channelIds: ["chat"], eventTypes: ["text.message.committed"]},
      onStateChange: (state) => { if (active) setStatus(state); },
      onError: (failure) => { if (active) setError(failure.message); },
      onEvent: (event) => {
        if (!active) return;
        const payload = event.payload;
        if (!payload || typeof payload !== "object" ||
            !("text" in payload) || typeof payload.text !== "string") return;
        const text = payload.text;
        setMessages(previous => previous.some(item => item.id === event.id)
          ? previous : [...previous, {id: event.id, text}]);
      },
    });
    return () => {
      active = false;
      subscription.close();
    };
  }, [room]);

  return <section aria-label="Chat">
    <p role="status">{status}</p>
    {error && <p role="alert">{error}</p>}
    <ol>{messages.map(message => <li key={message.id}>{message.text}</li>)}</ol>
  </section>;
}