import { useCallback, useMemo, useState, type ReactNode } from 'react'
import { ToastContext, registerToastPush, type ToastItem, type ToastVariant } from './toast-store'

let nextId = 1

export function ToastProvider({ children }: Readonly<{ children: ReactNode }>) {
  const [toasts, setToasts] = useState<ToastItem[]>([])

  const push = useCallback((message: string, variant: ToastVariant) => {
    setToasts((prev) => [...prev, { id: nextId++, message, variant }])
  }, [])

  const dismiss = useCallback((id: number) => {
    setToasts((prev) => prev.filter((t) => t.id !== id))
  }, [])

  registerToastPush(push)

  // Литерал в value пересоздавался бы на каждый рендер провайдера и перерисовывал всех потребителей
  // контекста, даже когда список тостов не менялся.
  const value = useMemo(() => ({ toasts, dismiss }), [toasts, dismiss])

  return <ToastContext value={value}>{children}</ToastContext>
}
