import React from "react"
import { reducer, initialState } from "./reducer"

import Poll from "./Poll"

export const AppData = React.createContext({
  state: initialState,
  dispatch: () => null
})

export const AppDataProvider = ({ children }) => {

  const [data, dispatchData] = React.useReducer(reducer, initialState)

  const [games,       gamesFetching       ] = Poll('/api/gamestate'  , 30, data.offlineMode)
  const [leaderboard, leaderboardFetching ] = Poll('/api/leaderboard', 60, data.offlineMode)
  const [user] = Poll('/api/user') // once

  data.games         = games
  data.gamesFetching = gamesFetching

  data.leaderboard         = leaderboard
  data.leaderboardFetching = leaderboardFetching

  data.isCurrentUser = (otherUsername) => {
    return user?.username && ciEquals(user.username, otherUsername) ? true : null
  }
  
  return (
    <AppData.Provider value={[data, dispatchData]}>
      {children}
    </AppData.Provider>
  )
}

function ciEquals(a, b) {
  return typeof a === 'string' && typeof b === 'string'
      ? a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0
      : a === b;
}