import React, { useEffect } from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  ScrollView,
  BackHandler,
  ImageBackground,
} from 'react-native'
import appColors from '../../theme/appColors'
import { fontSizes, windowHeight, windowWidth } from '../../theme/appConstant'
import appFonts from '../../theme/appFonts'
import Icons from '../../utils/icons/icons'
import Images from '../../utils/images/images'
import { useSelector } from 'react-redux'
import { useNavigation, useRoute, useTheme } from '@react-navigation/native'
import { useValues } from '../../utils/context'
import { Header, notificationHelper } from '../../commonComponents'
import { useAppNavigation } from '../../utils/navigation'
import styles from './styles'

export function FleetDriverDashBoard() {
  const { dashBoardList } = useSelector((state: any) => state.dashboard)
  const route = useRoute<any>()
  const { driverData } = route.params || ''
  const { navigate } = useAppNavigation()
  const { isDark, rtl } = useValues()
  const { translateData } = useSelector((state: any) => state.setting)
  const completeTotal = dashBoardList?.ride?.completed_rides
  const pendingTotal = dashBoardList?.ride?.pending_rides
  const cancelTotal = dashBoardList?.ride?.cancelled_rides
  const { colors } = useTheme()
  const { selfDriver } = useSelector((state: any) => state.account)

  const userName = selfDriver?.name || ''
  const firstLetter = userName.charAt(0).toUpperCase()

  const gotoDetails = () => {
    if (dashBoardList?.ride?.total_earnings > 0) {
      navigate('TotalEarnings')
    } else {
      notificationHelper('', translateData?.earningsDataNotAvailable, 'success')
    }
  }
  const navigation = useNavigation<any>()
  useEffect(() => {
    const backAction = () => {
      navigation.goBack()
      return true
    }

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

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

  return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      style={{
        backgroundColor: isDark ? appColors.bgDark : appColors.graybackground,
        flex: 1,
      }}
    >
      <View>
        <Header
          title={translateData.driverPerformance || 'Driver Performance'}
          style={styles.gap}
        />

        <View
          style={{
            alignItems: 'center',
            marginTop: windowHeight(6),
            backgroundColor: isDark ? appColors.primaryFont : appColors.white,
            width: '90%',
            alignSelf: 'center',
            borderWidth: windowWidth(0.45),
            borderRadius: windowWidth(5),
            borderColor: isDark ? appColors.darkborder : appColors.loader,
            height: windowHeight(28),
          }}
        >
          <View
            style={[
              styles.profileImageView,
              {
                backgroundColor: colors.card,
                borderColor: isDark ? appColors.bgDark : appColors.lightGray,
              },
            ]}
          >
            <View
              style={[
                styles.charImage,
                {
                  backgroundColor: isDark
                    ? appColors.primaryFont
                    : appColors.white,
                },
              ]}
            >
              <Text
                style={[
                  styles.firstLetter,
                  { color: isDark ? appColors.white : appColors.black },
                ]}
              >
                {firstLetter}
              </Text>
            </View>
          </View>

          <View
            style={{
              alignSelf: 'center',
              alignItems: 'center',
              justifyContent: 'center',
              marginTop: windowHeight(8.2),
            }}
          >
            <Text
              style={{
                fontSize: fontSizes.FONT4HALF1,
                fontFamily: appFonts.medium,
                color: isDark ? appColors.white : appColors.black,
              }}
            >
              {driverData?.name}
            </Text>
            <View
              style={{
                flexDirection: rtl ? 'row-reverse' : 'row',
                alignItems: 'center',
                marginTop: windowHeight(0.5),
              }}
            >
              <Icons.Star />
              <Text
                style={{
                  fontSize: fontSizes.FONT3HALF1,
                  fontFamily: appFonts.regular,
                  color: isDark ? appColors.white : appColors.black,
                  marginHorizontal: windowWidth(1),
                }}
              >
                {driverData?.rating_count}
              </Text>
              <View style={styles.line} />
              <Text
                style={{
                  fontSize: fontSizes.FONT3HALF1,
                  fontFamily: appFonts.regular,
                  color: appColors.iconColor,
                  marginHorizontal: windowWidth(1),
                }}
              >
                {translateData?.rating}
              </Text>
            </View>
          </View>

          <View
            style={[
              styles.box,
              {
                backgroundColor: colors.background,
                flexDirection: rtl ? 'row-reverse' : 'row',
              },
            ]}
          >
            <View style={styles.smallBox}>
              <Text style={[styles.total, { color: colors.text }]}>
                {completeTotal}
              </Text>
              <Text style={[styles.subText]}>{translateData?.completed}</Text>
            </View>
            <View style={styles.smallBox}>
              <Text style={[styles.total, { color: colors.text }]}>
                {pendingTotal}
              </Text>
              <Text style={[styles.subText]}>{translateData?.pending}</Text>
            </View>
            <View style={styles.smallBox}>
              <Text style={[styles.total, { color: colors.text }]}>
                {cancelTotal}
              </Text>
              <Text style={[styles.subText]}>{translateData?.cancelled}</Text>
            </View>
          </View>
        </View>

        <View
          style={{
            marginVertical: windowHeight(1.5),
            flexDirection: rtl ? 'row-reverse' : 'row',
            alignItems: 'center',
            alignSelf: 'center',
          }}
        >
          <Text
            style={{
              color: appColors.iconColor,
              fontFamily: appFonts.regular,
              marginHorizontal: windowWidth(2),
            }}
          >
            View All Rides
          </Text>
          <Icons.GoArrow />
        </View>

        <View
          style={{
            height: windowHeight(80),
            marginTop: windowHeight(1.5),
            backgroundColor: isDark ? appColors.bgDark : appColors.white,
          }}
        >
          <TouchableOpacity
            style={{
              backgroundColor: isDark
                ? appColors.darkThemeSub
                : appColors.white,
              borderColor: isDark
                ? appColors.darkBorderBlack
                : appColors.border,
              borderWidth: windowHeight(0.1),
              height: windowHeight(12),
              width: '91%',
              alignSelf: 'center',
              marginTop: windowHeight(2.8),
              borderRadius: windowHeight(0.8),
              flexDirection: rtl ? 'row-reverse' : 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              paddingHorizontal: windowHeight(2),
            }}
            onPress={gotoDetails}
          >
            <View
              style={{
                backgroundColor: appColors.gray,
                width: windowHeight(8),
                height: windowHeight(8),
                borderRadius: windowHeight(0.8),
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Image
                source={Images.mapFrame}
                resizeMode="contain"
                style={{
                  height: windowHeight(4),
                  width: windowHeight(4),
                }}
              />
            </View>

            <View style={{ flex: 1, marginLeft: windowHeight(2) }}>
              <Text
                style={{
                  color: isDark ? appColors.white : appColors.black,
                  fontSize: fontSizes.FONT4,
                  fontFamily: appFonts.medium,
                }}
              >
                {translateData?.totalEarning}
              </Text>
              <Text
                style={{
                  color: appColors.yellow,
                  fontSize: fontSizes.FONT4HALF,
                  fontFamily: appFonts.bold,
                  marginTop: windowHeight(0.5),
                }}
              >
                {dashBoardList?.ride?.currency_symbol}
                {dashBoardList?.ride?.total_earnings}
              </Text>
            </View>

            <Icons.LeftArrow
              color={isDark ? appColors.darkText : appColors.primaryFont}
            />
          </TouchableOpacity>

          <Text
            style={{
              color: isDark ? appColors.white : appColors.black,
              marginHorizontal: windowWidth(5),
              marginTop: windowHeight(2.5),
              fontFamily: appFonts.medium,
              fontSize: fontSizes.FONT4,
            }}
          >
            {translateData.drivePerformance}
          </Text>
          <View
            style={{
              flexDirection: rtl ? 'row-reverse' : 'row',
              justifyContent: 'space-between',
              gap: 5,
            }}
          >
            <View
              style={{
                height: windowHeight(21),
                width: windowHeight(20),
                borderColor: isDark
                  ? appColors.darkBorderBlack
                  : appColors.border,
                borderWidth: windowHeight(0.1),
                marginHorizontal: windowHeight(2.5),
                borderRadius: windowHeight(0.8),
                marginTop: windowHeight(2),
              }}
            >
              <View style={{ flexDirection: rtl ? 'row-reverse' : 'row' }}>
                <View
                  style={{
                    backgroundColor: appColors.whiteopicity,
                    height: windowHeight(6),
                    width: windowHeight(6),
                    borderRadius: windowHeight(0.7),
                    marginTop: windowHeight(2),
                    marginHorizontal: windowHeight(2),
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Image
                    source={Images.mapFrame1}
                    resizeMode="contain"
                    style={{
                      height: windowHeight(4),
                      width: windowHeight(3),
                    }}
                  />
                </View>
                <View>
                  <Text
                    style={{
                      color: appColors.blueShade,
                      top: windowHeight(2),
                      fontFamily: appFonts.bold,
                      fontSize: fontSizes.FONT5,
                      textAlign: 'center',
                    }}
                  >
                    {dashBoardList?.driver_performance?.total_distance}
                  </Text>
                  <Text
                    style={{
                      color: appColors.blueShade,
                      top: windowHeight(2),
                      fontFamily: appFonts.bold,
                      fontSize: fontSizes.FONT5,
                      textAlign: 'center',
                    }}
                  >
                    {dashBoardList?.driver_performance?.unit}
                  </Text>
                </View>
              </View>
              <Text
                style={{
                  color: isDark ? appColors.white : appColors.black,
                  marginHorizontal: windowHeight(2),
                  marginTop: windowHeight(1.7),
                  fontFamily: appFonts.medium,
                  textAlign: rtl ? 'right' : 'left',
                }}
              >
                {translateData.totalDistances}
              </Text>
              <Image
                source={Images.mapFrame2}
                resizeMode="contain"
                style={{
                  height: windowHeight(10),
                  width: windowHeight(21),
                  alignSelf: 'center',
                }}
              />
            </View>
            <View
              style={{
                height: windowHeight(21),
                width: windowHeight(20),
                borderColor: isDark
                  ? appColors.darkBorderBlack
                  : appColors.border,
                borderWidth: windowHeight(0.1),
                borderRadius: windowHeight(0.8),
                marginTop: windowHeight(2),
                right: windowHeight(2.5),
              }}
            >
              <View style={{ flexDirection: rtl ? 'row-reverse' : 'row' }}>
                <View
                  style={{
                    backgroundColor: appColors.bgColor2,
                    height: windowHeight(6),
                    width: windowHeight(6),
                    borderRadius: windowHeight(0.7),
                    marginTop: windowHeight(2),
                    marginHorizontal: windowHeight(2),
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Image
                    source={Images.mapFrame3}
                    resizeMode="contain"
                    style={{
                      height: windowHeight(4),
                      width: windowHeight(3),
                    }}
                  />
                </View>
                <Text
                  style={{
                    color: appColors.orange,
                    top: windowHeight(3.5),
                    fontFamily: appFonts.bold,
                    fontSize: fontSizes.FONT5,
                    textAlign: rtl ? 'right' : 'left',
                  }}
                >
                  {dashBoardList?.driver_performance?.total_hours}h
                </Text>
              </View>
              <Text
                style={{
                  color: isDark ? appColors.white : appColors.black,
                  marginHorizontal: windowHeight(2),
                  marginTop: windowHeight(1.7),
                  fontFamily: appFonts.medium,
                  textAlign: rtl ? 'right' : 'left',
                }}
              >
                {translateData.totalHours}
              </Text>
              <Image
                source={Images.mapFrame4}
                resizeMode="contain"
                style={{
                  height: windowHeight(10),
                  width: windowHeight(21),
                  alignSelf: 'center',
                }}
              />
            </View>
          </View>

          <Text
            style={{
              color: isDark ? appColors.white : appColors.black,
              marginHorizontal: windowWidth(5),
              marginTop: windowHeight(2.5),
              fontFamily: appFonts.medium,
              fontSize: fontSizes.FONT4,
            }}
          >
            {translateData.averageDrivePerformance}
          </Text>
          <View
            style={{
              flexDirection: rtl ? 'row-reverse' : 'row',
              justifyContent: 'space-between',
              gap: 5,
            }}
          >
            <View
              style={{
                height: windowHeight(26),
                width: windowHeight(20),
                borderColor: isDark
                  ? appColors.darkBorderBlack
                  : appColors.border,
                borderWidth: windowHeight(0.1),
                marginHorizontal: windowHeight(2.5),
                borderRadius: windowHeight(0.8),
                marginTop: windowHeight(2),
              }}
            >
              <View style={{ flexDirection: rtl ? 'row-reverse' : 'row' }}>
                <View
                  style={{
                    backgroundColor: appColors.gray,
                    height: windowHeight(6),
                    width: windowHeight(6),
                    borderRadius: windowHeight(0.7),
                    marginTop: windowHeight(2),
                    marginHorizontal: windowHeight(2),
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Image
                    source={Images.mapFrame5}
                    resizeMode="contain"
                    style={{
                      height: windowHeight(4),
                      width: windowHeight(3),
                    }}
                  />
                </View>
                <View>
                  <Text
                    style={{
                      color: appColors.primary,
                      top: windowHeight(2),
                      fontFamily: appFonts.bold,
                      fontSize: fontSizes.FONT5,
                      textAlign: 'center',
                    }}
                  >
                    {dashBoardList?.driver_performance?.average_distance}
                  </Text>
                  <Text
                    style={{
                      color: appColors.primary,
                      top: windowHeight(2),
                      fontFamily: appFonts.bold,
                      fontSize: fontSizes.FONT5,
                      textAlign: 'center',
                    }}
                  >
                    {dashBoardList?.driver_performance?.unit}
                  </Text>
                </View>
              </View>
              <Text
                style={{
                  color: isDark ? appColors.white : appColors.black,
                  marginHorizontal: windowHeight(2),
                  marginTop: windowHeight(1.7),
                  fontFamily: appFonts.medium,
                  textAlign: rtl ? 'right' : 'left',
                }}
              >
                {translateData.averageDistances}
              </Text>
              <Image
                source={Images.mapFrame6}
                style={{
                  height: windowHeight(12.4),
                  width: windowHeight(21),
                  alignSelf: 'center',
                  marginTop: windowHeight(1.8),
                }}
              />
            </View>
            <View
              style={{
                height: windowHeight(26),
                width: windowHeight(20),
                borderColor: isDark
                  ? appColors.darkBorderBlack
                  : appColors.border,
                borderWidth: windowHeight(0.1),
                borderRadius: windowHeight(0.8),
                marginTop: windowHeight(2),
                right: windowHeight(2.5),
              }}
            >
              <View
                style={{
                  flexDirection: rtl ? 'row-reverse' : 'row',
                }}
              >
                <View
                  style={{
                    backgroundColor: appColors.bgColor1,
                    height: windowHeight(6),
                    width: windowHeight(6),
                    borderRadius: windowHeight(0.7),
                    marginTop: windowHeight(2),
                    marginHorizontal: windowHeight(2),
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Image
                    source={Images.mapFrame8}
                    resizeMode="contain"
                    style={{
                      height: windowHeight(4),
                      width: windowHeight(3),
                    }}
                  />
                </View>
                <Text
                  style={{
                    color: appColors.setp,
                    top: windowHeight(3.5),
                    fontFamily: appFonts.bold,
                    fontSize: fontSizes.FONT5,
                  }}
                >
                  {dashBoardList?.driver_performance?.average_hours}
                </Text>
              </View>
              <Text
                style={{
                  color: isDark ? appColors.white : appColors.black,
                  marginHorizontal: windowHeight(2),
                  marginTop: windowHeight(1.7),
                  fontFamily: appFonts.medium,
                  textAlign: rtl ? 'right' : 'left',
                }}
              >
                {translateData.averageHours}{' '}
              </Text>
              <Image
                source={Images.mapFrame7}
                style={{
                  height: windowHeight(10),
                  width: windowHeight(20),
                  alignSelf: 'center',
                  top: windowHeight(3),
                }}
              />
            </View>
          </View>
        </View>
      </View>
    </ScrollView>
  )
}
