import React, { createContext, useState, useEffect, useCallback } from "react"

export const StateContext = createContext<StateContextInterface | null>(null)

export const StateProvider = (props: any): JSX.Element => {

  const [state, setState] = useState({})

  const addState = useCallback(
    (newState: any) => {
      setState(prevState => {
        return {
          ...prevState,
          ...newState
        }
      })
    },
    []
  )

  useEffect(() => {
    try {
      window.addState = addState
    } catch {
      // nothing
    }
  }, [])

  return <StateContext.Provider value={{ state, addState }}>{props?.children}</StateContext.Provider>
}

export const withState = (Component: any) => (props: any) => (
  <StateContext.Consumer>
    {props => <Component {...props} />}
  </StateContext.Consumer>
)

export interface StateContextInterface {
  state: any
  addState: any
}