import * as SplashScreen from 'expo-splash-screen'
import React, { Dispatch, useCallback, useEffect } from 'react'
import { connect } from 'react-redux'
import { AnyAction } from 'redux'
import { navigateToSecondScreen } from '../App.actions'
import Home from '../components/Home'

interface Props {
  onNextPressed: () => void
}

const HomeScreen: React.FunctionComponent<Props> = ({ onNextPressed }) => {
  const hideSplashScreen = useCallback(async () => {
    setTimeout(async () => {
      await SplashScreen.hideAsync()
    }, 3000)
  }, [])

  useEffect(() => {
    hideSplashScreen()
  }, [hideSplashScreen])
  return <Home onNextPressed={onNextPressed} />
}

const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => ({
  onNextPressed: () => {
    dispatch(navigateToSecondScreen())
  },
})

export default connect(null, mapDispatchToProps)(HomeScreen)