// @ts-nocheck

import React, { useCallback, useEffect, useState, createContext } from 'react'
import { Toast, ToastProps } from '../'

export const FrameContext = createContext({})

export const FrameContextProvider = ({ children }) => {
  const [toasts, setToasts] = useState([])

  useEffect(() => {
    if (toasts.length > 0) {
      const timer = setTimeout(
        () => setToasts((toasts) => toasts.slice(1)),
        6000
      )
      return () => clearTimeout(timer)
    }
  }, [toasts])

  const addToast = useCallback(
    function (toast) {
      setToasts((toasts) => [...toasts, toast])
    },
    [setToasts]
  )

  return (
    <FrameContext.Provider value={addToast}>
      {children}
      <div className="fixed bottom-1">
        {toasts.map(({ content }, index) => (
          <Toast content={content} key={index} />
        ))}
      </div>
    </FrameContext.Provider>
  )
}
