import React, { useEffect } from 'react'
import { BackHandler, View } from 'react-native'
import styles from './styles'
import { Background } from '../component'
import OtpView from './component/otpView'
import appColors from '../../../theme/appColors'
import { useValues } from '../../../utils/context'
import { useNavigation } from '@react-navigation/native'
import { windowHeight } from '../../../theme/appConstant'

export function Otp() {
  const navigation = useNavigation<any>()
  useEffect(() => {
    const backAction = () => {
      navigation.goBack()
      return true
    }

    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    )

    return () => backHandler.remove()
  }, [])

  const { isDark } = useValues()
  return (
    <View
      style={[
        styles.main,
        {
          backgroundColor: isDark ? appColors.bgDark : appColors.lightGray,
        },
      ]}
    >
      <Background />
      <View style={{ marginTop: windowHeight(4.5) }}>
        <OtpView />
      </View>
    </View>
  )
}
