import { useEffect } from "react";
import { useT } from "../i18n";
import { flushOutbox, removeFromOutbox, useOutbox } from "../outbox";
import { useStore } from "../store";
import { Icon } from "./Icon";

/** Messages waiting for a connection: sent automatically once the server is reachable again. */
export function OutboxBar({ sessionId }: { sessionId: string }) {
  const t = useT();
  const items = useOutbox(sessionId);
  const connected = useStore((s) => s.connected);
  useEffect(() => {
    if (!items.length) return;
    const go = () => void flushOutbox(sessionId);
    if (connected && navigator.onLine) go();
    window.addEventListener("online", go);
    return () => window.removeEventListener("online", go);
  }, [sessionId, connected, items.length]);
  if (!items.length) return null;
  return (
    <div className="outbox" role="status">
      <div className="outbox-head">
        <Icon name="clock" className="tiny" /> {t("outbox.waiting", { n: items.length })}
        <span className="grow" />
        <button className="small" onClick={() => void flushOutbox(sessionId)}>
          {t("outbox.sendNow")}
        </button>
      </div>
      {items.map((i) => (
        <div key={i.id} className="outbox-item">
          <span>{i.text.length > 120 ? `${i.text.slice(0, 120)}…` : i.text}</span>
          <button className="small ghost" onClick={() => removeFromOutbox(i.id)} aria-label={t("outbox.discard")} title={t("outbox.discard")}>
            <Icon name="close" />
          </button>
        </div>
      ))}
    </div>
  );
}