import { useEffect, useState } from 'react';
import { RefreshCwIcon } from 'lucide-react';

import { CONNECTION_EVENT, type ConnectionChange } from '../../lib/connection';
import { Button } from '../ui/button';
import { Callout } from '../ui/callout';

/**
 * Said above every page while a Recomaze service is not answering, so an
 * empty list or a zero reads as "not loaded" rather than "nothing there".
 * Goes away by itself once the service answers a later call.
 */
export const ConnectionNotice = (): JSX.Element | null => {
  const [down, setDown] = useState<readonly string[]>([]);

  useEffect(() => {
    const onChange = (event: Event): void => {
      const { host, up } = (event as CustomEvent<ConnectionChange>).detail;
      setDown(current => {
        if (up) return current.filter(item => item !== host);

        return current.includes(host) ? current : [...current, host];
      });
    };
    window.addEventListener(CONNECTION_EVENT, onChange);

    return () => window.removeEventListener(CONNECTION_EVENT, onChange);
  }, []);

  if (down.length === 0) return null;

  return (
    <Callout tone="warning" className="mb-6 flex flex-wrap items-center gap-3">
      <p className="min-w-0 flex-1 text-sm text-foreground">
        Recomaze is not answering right now ({down.join(', ')}), so this page
        may show less than there is. Nothing is lost; try again in a moment.
      </p>
      <Button
        type="button"
        size="sm"
        variant="outline"
        onClick={() => window.location.reload()}
      >
        <RefreshCwIcon />
        Retry
      </Button>
    </Callout>
  );
};