import React, { useCallback, useEffect } from 'react'
import { BackHandler, Image, Text, TouchableOpacity, View } from 'react-native'
import styles from './styles'
import { RideStatus } from '../rideStatus'
import appColors from '../../../theme/appColors'
import { rideDataGets } from '../../../api/store/action'
import { useDispatch, useSelector } from 'react-redux'
import { useFocusEffect, useTheme } from '@react-navigation/native'
import { AppDispatch } from '../../../api/store'
import { useAppNavigation } from '../../../utils/navigation'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../theme/appConstant'
import Icons from '../../../utils/icons/icons'
import { useValues } from '../../../utils/context'
import appFonts from '../../../theme/appFonts'
import commanStyles from '../../../style/commanStyles'

export function MyRide() {
  const dispatch = useDispatch<AppDispatch>()
  const navigation = useAppNavigation()

  useFocusEffect(
    useCallback(() => {
      dispatch(rideDataGets())
    }, [dispatch]),
  )

  useEffect(() => {
    const backAction = () => {
      navigation.goBack()
      return true
    }
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    )

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

  const { isDark, rtl, viewRtlStyle } = useValues()
  const { translateData } = useSelector((state: any) => state.setting)
  const { selfDriver } = useSelector((state: any) => state.account)
  const char = selfDriver?.name ? selfDriver.name.charAt(0) : ''
  const { colors } = useTheme()
  const { navigate } = useAppNavigation()

  const gotoBack = () => {
    navigation.goBack()
  }

  return (
    <View style={styles.main}>
      <View
        style={{
          flexDirection: rtl ? 'row-reverse' : 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          height: windowHeight(11),
          backgroundColor: isDark ? appColors.primaryFont : appColors.white,
          borderBottomEndRadius: windowWidth(5),
          borderBottomStartRadius: windowWidth(5),
          paddingHorizontal: windowWidth(4),
          elevation: 1,
        }}
      >
        <View
          style={{
            flexDirection: rtl ? 'row-reverse' : 'row',
            alignItems: 'center',
          }}
        >
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={gotoBack}
            style={[
              commanStyles.backButtonMain,
              {
                backgroundColor: colors.card,
                borderColor: isDark ? appColors.darkborder : appColors.border,
              },
            ]}
          >
            <Icons.Back color={colors.text} />
          </TouchableOpacity>

          <Text
            style={{
              color: isDark ? appColors.white : appColors.primaryFont,
              fontFamily: appFonts.semiBold,
              fontSize: fontSizes.FONT4HALF,
              marginHorizontal: windowWidth(4),
            }}
          >
            {translateData.ride}
          </Text>
        </View>

        <View
          style={{
            backgroundColor: isDark ? appColors.bgDark : appColors.lightGray,
            width: windowWidth(28),
            height: windowHeight(6),
            borderRadius: windowWidth(25),
            flexDirection: viewRtlStyle,
            alignItems: 'center',
            paddingHorizontal: windowWidth(2.5),
          }}
        >
          <TouchableOpacity
            onPress={() => navigate('Notification')}
            activeOpacity={0.9}
            style={{
              height: windowHeight(4.5),
              width: windowHeight(4.5),
              backgroundColor: isDark ? appColors.primaryFont : appColors.white,
              borderRadius: windowHeight(15),
              alignItems: 'center',
              justifyContent: 'center',
              borderColor: isDark ? appColors.darkborder : appColors.white,
              borderWidth: 1,
            }}
          >
            <Icons.Notification
              color={isDark ? appColors.white : appColors.primaryFont}
            />
          </TouchableOpacity>
          <View
            style={{
              height: windowHeight(3),
              width: windowWidth(0.45),
              backgroundColor: isDark ? appColors.darkborder : appColors.border,
              marginHorizontal: windowWidth(2),
            }}
          />

          <TouchableOpacity
            activeOpacity={0.9}
            onPress={() => navigate('ProfileSetting')}
          >
            {selfDriver?.profile_image_url ? (
              <Image
                style={{
                  backgroundColor: appColors.primary,
                  height: windowHeight(4.5),
                  width: windowHeight(4.5),
                  borderRadius: windowHeight(5),
                }}
                source={{
                  uri: selfDriver?.profile_image_url,
                }}
              />
            ) : (
              <View
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: windowHeight(4.5),
                  height: windowHeight(4.5),
                  backgroundColor: isDark ? appColors.white : appColors.black,
                  borderRadius: windowHeight(74),
                }}
              >
                <Text
                  style={{
                    color: isDark ? appColors.black : appColors.white,
                    fontFamily: appFonts.bold,
                    fontSize: fontSizes.FONT5,
                  }}
                >
                  {char}
                </Text>
              </View>
            )}
          </TouchableOpacity>
        </View>
      </View>

      <View>
        <View
          style={{
            backgroundColor: appColors.graybackground,
          }}
        >
          <RideStatus />
        </View>
      </View>
    </View>
  )
}

export default MyRide
