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

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

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>
          <Dashboard />
        </BrowserRouter>
      </ChakraProvider>
    </starsContext.Provider>
  )
}

export default App