import React, { useState } from 'react'
import { Image, ScrollView, Text, TouchableOpacity, View } from 'react-native'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../theme/appConstant'
import appColors from '../../../theme/appColors'
import appFonts from '../../../theme/appFonts'
import Images from '../../../utils/images/images'
import Icons from '../../../utils/icons/icons'
import { useAppNavigation } from '../../../utils/navigation'
import { useDispatch, useSelector } from 'react-redux'
import { dashBoardData } from '../../../api/store/action'
import { AppDispatch } from '../../../api/store'
import { useValues } from '../../../utils/context'
import { useNavigation, useTheme } from '@react-navigation/native'
import commanStyles from '../../../style/commanStyles'
import FastImage from 'react-native-fast-image'

export function FleetDashBoard() {
  const { zoneValue } = useSelector((state: any) => state.zoneUpdate)
  const dispatch = useDispatch<AppDispatch>()
  const { navigate }: any = useAppNavigation()
  const { fleetDriver } = useSelector((state: any) => state.fleet)

  const gotoDriverDashboard = (driverData: any) => {
    const unit = zoneValue?.distance_type
    const zoneId = zoneValue?.id
    const driver_id = driverData?.id
    dispatch(dashBoardData({ unit, zoneId, driver_id }))

    navigate('FleetDriverDashBoard', { driverData })
  }

  const DriverCard = ({
    name,
    email,
    driverData,
  }: {
    name: string
    email: string
    driverData: any
  }) => (
    <TouchableOpacity
      style={{
        backgroundColor: colors.card,
        borderWidth: windowWidth(0.45),
        borderColor: colors.border,
        width: '89%',
        marginTop: windowHeight(2),
        alignSelf: 'center',
        borderRadius: windowWidth(5),
        bottom: windowHeight(2),
        paddingVertical: windowHeight(2),
        paddingBottom: windowHeight(1.5),
      }}
      onPress={() => gotoDriverDashboard(driverData)}
    >
      <View
        style={{
          flexDirection: 'row',
          marginHorizontal: windowHeight(2),
        }}
      >
        <Image
          source={Images.user}
          resizeMode="contain"
          style={{
            height: windowHeight(6),
            width: windowHeight(6),
            borderRadius: windowHeight(6),
          }}
        />
        <View style={{ width: '62%' }}>
          <View
            style={{
              flexDirection: 'column',
              flex: 1,
              marginHorizontal: windowWidth(2),
              justifyContent: 'center',
            }}
          >
            <View style={{ flexDirection: viewRtlStyle, alignItems: 'center' }}>
              <Text
                style={{
                  color: appColors.black,
                  fontFamily: appFonts.regular,
                  fontSize: fontSizes.FONT4,
                }}
              >
                {name}
              </Text>
              <View style={{ marginHorizontal: windowWidth(1) }}>
                <Icons.Name />
              </View>
            </View>
            <Text
              style={{
                color: appColors.iconColor,
                fontFamily: appFonts.regular,
                fontSize: fontSizes.FONT3SMALL1,
                marginTop: windowHeight(0.5),
              }}
            >
              {email}
            </Text>
          </View>
        </View>

        <View>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              marginTop: windowHeight(0.5),
            }}
          >
            {Array.from({ length: 5 }).map((_, index) => {
              const full = index + 1 <= driverData?.rating
              const half =
                index + 0.5 <= driverData?.rating &&
                index + 1 > driverData?.rating

              if (full) return <Icons.RatingStar key={index} />
              if (half) return <Icons.RatingHalfStar key={index} />
              return <Icons.RatingEmptyStar key={index} />
            })}
          </View>
          <View
            style={{
              flexDirection: viewRtlStyle,
              alignItems: 'center',
              marginTop: windowHeight(0.5),
              justifyContent: 'flex-end',
            }}
          >
            <Text
              style={{
                color: colors.text,
                fontFamily: appFonts.regular,
                fontSize: fontSizes.FONT4,
                marginHorizontal: windowWidth(1),
              }}
            >
              {driverData?.rating_count}{' '}
            </Text>

            <Text
              style={{
                color: appColors.iconColor,
                fontSize: fontSizes.FONT3HALF,
                fontFamily: appFonts.regular,
              }}
            >
              ({driverData?.review_count})
            </Text>
          </View>
        </View>
      </View>

      <View
        style={{
          height: windowHeight(0.6),
          backgroundColor: colors.background,
          width: '100%',
          alignSelf: 'center',
          marginVertical: windowHeight(1.3),
          marginBottom: windowHeight(1.8),
        }}
      />

      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginHorizontal: windowWidth(4),
        }}
      >
        <View>
          <Text
            style={{
              color: appColors.iconColor,
              fontFamily: appFonts.regular,
              fontSize: fontSizes.FONT3HALF1,
            }}
          >
            {translateData?.arennotem}
          </Text>
        </View>

        <View
          style={{
            alignItems: 'flex-end',
            flexDirection: 'row',
            justifyContent: 'space-between',
            gap: 8,
          }}
        >
          <Text
            style={{
              color: appColors.online,
              fontFamily: appFonts.medium,
              fontSize: fontSizes.FONT4HALF1,
            }}
          >
            {driverData?.wallet_balance}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  )

  const { isDark, viewRtlStyle, rtl } = useValues()
  const { colors } = useTheme()
  const { navigation } = useNavigation<any>()

  const { translateData } = useSelector((state: any) => state.setting)
  const { selfDriver } = useSelector((state: any) => state.account)
  const char = selfDriver?.name ? selfDriver.name.charAt(0) : ''
  const gotoBack = () => {
    navigation.goBack()
  }

  return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      style={{ marginBottom: windowHeight(0) }}
    >
      <View style={{ backgroundColor: colors.background, flex: 1 }}>
        <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.driver}
            </Text>
          </View>

          <View
            style={{
              backgroundColor: isDark
                ? appColors.primaryFont
                : 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.darkThemeSub
                  : appColors.white,
                borderRadius: windowHeight(15),
                alignItems: 'center',
                justifyContent: 'center',
                borderColor: isDark
                  ? appColors.darkBorderBlack
                  : 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>
        {!fleetDriver?.data || fleetDriver?.data?.length === 0 ? (
          <View>
            <View
              style={{
                marginTop: windowHeight(19),
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <FastImage
                source={
                  isDark ? Images.emptyDriverListDark : Images.emptyDriverList
                }
                style={{
                  height: windowHeight(30),
                  width: windowHeight(30),
                }}
                resizeMode="contain"
              />

              <View
                style={{
                  flexDirection: viewRtlStyle,
                  alignItems: 'center',
                  marginTop: windowHeight(2),
                }}
              >
                <Text
                  style={{
                    color: isDark ? appColors.white : appColors.black,
                    fontSize: fontSizes.FONT4HALF,
                    fontFamily: appFonts.medium,
                    textAlign: 'center',
                    marginRight: 6,
                  }}
                >
                  {translateData.EmptyDriverList}
                </Text>
                <FastImage
                  source={Images.infoCircle}
                  style={{
                    height: windowHeight(2.5),
                    width: windowHeight(2.5),
                  }}
                  resizeMode="contain"
                />
              </View>

              <Text
                style={{
                  textAlign: 'center',
                  paddingHorizontal: windowWidth(5),
                  color: appColors.darkBorderBlack,
                  marginTop: windowHeight(1),
                }}
              >
                {translateData.EmptyDriverListNote}
              </Text>
            </View>{' '}
          </View>
        ) : (
          <View style={{ marginVertical: windowHeight(3) }}>
            {fleetDriver?.data?.map((driver: any) => (
              <DriverCard key={driver.id} {...driver} driverData={driver} />
            ))}
          </View>
        )}
      </View>
    </ScrollView>
  )
}
