import { useEffect, useState } from "react";

import { useAckAnnouncement, usePendingAnnouncements } from "../hooks/announcements";
import { AnnouncementWindow } from "./AnnouncementWindow";

/**
 * Очередь объявлений администрации поверх любой страницы: по одному, от старого
 * к новому, следующее — после «Понятно» на предыдущем. AppShell монтирует её только
 * когда пароль задан: обязательное окно пароля всегда первое.
 */
export function AnnouncementDialog() {
  const { data } = usePendingAnnouncements(true);
  const ack = useAckAnnouncement();
  // Сколько уже закрыто в этой очереди — для точек «2 из 3». Закрытые сразу уходят
  // из данных запроса, так что без счётчика точки показывали бы только остаток.
  const [closed, setClosed] = useState(0);
  const items = data ?? [];

  useEffect(() => {
    if (items.length === 0) setClosed(0);
  }, [items.length]);

  if (items.length === 0) return null;
  const current = items[0];

  return (
    <AnnouncementWindow
      key={current.id}
      title={current.title}
      bodyHtml={current.body_html}
      updated={current.updated}
      index={closed}
      total={closed + items.length}
      onOk={() => {
        setClosed((c) => c + 1);
        ack.mutate({ id: current.id, revision: current.revision });
      }}
    />
  );
}