import {
  View,
  Text,
  Image,
  TouchableOpacity,
  ImageBackground,
  Pressable,
} from 'react-native'
import React, { useEffect } from 'react'
import styles from './styles'
import { useValues } from '../../../../../utils/context'
import { useNavigation, useTheme } from '@react-navigation/native'
import { useDispatch, useSelector } from 'react-redux'
import appColors from '../../../../../theme/appColors'
import { selfDriverData } from '../../../../../api/store/action'
import Images from '../../../../../utils/images/images'
import { AppDispatch } from '../../../../../api/store'
import Icons from '../../../../../utils/icons/icons'

export function Profile() {
  const { viewRtlStyle, textRtlStyle } = useValues()
  const { isDark } = useValues()
  const dispatch = useDispatch<AppDispatch>()
  const { translateData } = useSelector(state => state.setting)
  const { selfDriver } = useSelector(state => state.account)
  const char = selfDriver?.name ? selfDriver.name.charAt(0) : ''
  const navigation = useNavigation()

  useEffect(() => {
    dispatch(selfDriverData())
  }, [dispatch])

  const navigationProfile = () => {
    navigation.navigate('ProfileSetting')
  }

  return (
    <Pressable onPress={navigationProfile}>
      <ImageBackground style={[styles.main]} source={Images.profileBackground1}>
        <>
          <View style={[styles.detainContain, { flexDirection: viewRtlStyle }]}>
            <TouchableOpacity onPress={navigationProfile} activeOpacity={0.7}>
              {selfDriver?.profile_image_url ? (
                <Image
                  source={{ uri: selfDriver?.profile_image_url }}
                  style={styles.profileImage}
                />
              ) : (
                <View style={styles.nameTag}>
                  <Text style={[styles.char, { color: appColors.black }]}>
                    {char}
                  </Text>
                </View>
              )}
            </TouchableOpacity>

            <View style={styles.details}>
              <View
                style={{
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  flexDirection: viewRtlStyle,
                }}
              >
                <Text
                  style={[
                    styles.name,
                    { color: appColors.white, textAlign: textRtlStyle },
                  ]}
                >
                  {selfDriver?.name || translateData.guest}
                </Text>
                <TouchableOpacity
                  onPress={navigationProfile}
                  activeOpacity={0.7}
                >
                  <Icons.edit color={appColors.primary} />
                </TouchableOpacity>
              </View>
              <View
                style={{
                  alignItems: 'center',
                  gap: 5,
                  flexDirection: viewRtlStyle,
                }}
              >
                <Icons.Star />
                <Text
                  style={[
                    styles.mail,
                    { textAlign: textRtlStyle, color: appColors.white },
                  ]}
                >
                  {selfDriver?.rating_count}
                </Text>
                <View style={styles.line} />
                <Text
                  style={[
                    styles.mail,
                    { textAlign: textRtlStyle, color: appColors.iconColor },
                  ]}
                >
                  {translateData?.rating}
                </Text>
              </View>
            </View>
          </View>
        </>
      </ImageBackground>
    </Pressable>
  )
}
