import React, { useCallback, useState } from 'react'
import { BrowserRouter } from 'react-router-dom'
import { ChakraProvider } from '@chakra-ui/react'
import { Provider } from 'react-redux'

import { Dashboard } from './dashboard'
import { stars as starsContext } from './__data__/context'
import { users } from './__data__/users'
import { store } from './__data__/store'

const App = () => {
  const [stars, setStar] = useState(
    Object.entries(users).reduce(
      (acc, [id, user]) => ({ ...acc, [id]: user.rated }),
      {},
    ),
  )

  const updateStar = useCallback(
    (userId: string, rate: number) =>
      setStar((state) => ({ ...state, [userId]: rate })),
    [setStar],
  )
  return (
    <starsContext.Provider
      value={{
        stars,
        setStar: updateStar,
      }}
    >
      <ChakraProvider>
        <BrowserRouter>
          <Provider store={store}>
            <Dashboard />
          </Provider>
        </BrowserRouter>
      </ChakraProvider>
    </starsContext.Provider>
  )
}

export default App