import { createContext, useCallback, useContext, useMemo, useRef, useState, type ReactNode } from "react";

import { Icon } from "./Icon";

/*
 * Short confirmations («отметил приём», «дневник сохранён») as a toast in the top-right corner instead of a separate
 * confirmation page: the person lands on the home screen right away and still sees what happened.
 */

interface Toast {
  id: number;
  text: string;
}

const Ctx = createContext<(text: string) => void>(() => undefined);
const LIFETIME_MS = 6000;

export function ToastProvider({ children }: { children: ReactNode }) {
  const [toasts, setToasts] = useState<Toast[]>([]);
  const next = useRef(0);

  const close = useCallback((id: number) => setToasts((all) => all.filter((t) => t.id !== id)), []);
  const show = useCallback(
    (text: string) => {
      const id = ++next.current;
      setToasts((all) => [...all.slice(-2), { id, text }]);
      window.setTimeout(() => close(id), LIFETIME_MS);
    },
    [close],
  );

  const value = useMemo(() => show, [show]);
  return (
    <Ctx.Provider value={value}>
      {children}
      <div className="toasts" role="status" aria-live="polite">
        {toasts.map((t) => (
          <div key={t.id} className="toast">
            <span className="toast__icon" aria-hidden="true">
              <Icon name="check" size={18} />
            </span>
            <p className="toast__text">{t.text}</p>
            <button type="button" className="toast__close" onClick={() => close(t.id)} aria-label="Закрыть">
              <Icon name="close" size={18} />
            </button>
          </div>
        ))}
      </div>
    </Ctx.Provider>
  );
}

export function useToast(): (text: string) => void {
  return useContext(Ctx);
}