import { View, Text, Linking } from 'react-native'
import React, { useEffect, useState } from 'react'
import styles from './styles'
import Icons from '../../../../../utils/icons/icons'
import appColors from '../../../../../theme/appColors'
import { ListItem } from '../'
import { useTheme } from '@react-navigation/native'
import { useValues } from '../../../../../utils/context'
import { useSelector } from 'react-redux'
import { useAppNavigation } from '../../../../../utils/navigation'
import firestore from '@react-native-firebase/firestore'

export function General() {
  const navigation = useAppNavigation()
  const { colors } = useTheme()
  const { textRtlStyle, isDark } = useValues()
  const { translateData, taxidoSettingData } = useSelector(
    (state: any) => state.setting,
  )
  const { selfDriver } = useSelector((state: any) => state.account)
  const adminId = 1
  const chatId = [adminId, selfDriver?.id].sort().join('_')
  const [unreadCount, setUnreadCount] = useState<number | any>(0)

  useEffect(() => {
    const currentUserId = selfDriver?.id
    if (!currentUserId || !chatId) return

    const unsubscribe = firestore()
      .collection('chats')
      .doc(chatId)
      .onSnapshot(doc => {
        if (doc.exists) {
          const data = doc.data()
          const counts = data?.unreadCount || {}

          const myUnread = counts[currentUserId] ?? 0

          const otherUserId: any = Object.keys(counts).find(
            id => id !== String(currentUserId),
          )
          const otherUnread = counts[otherUserId] ?? 0

          setUnreadCount({ myUnread, otherUnread })
        }
      })

    return () => unsubscribe()
  }, [chatId, selfDriver?.id])

  const gotoPolicy = () => {
    const url =
      taxidoSettingData?.cabbooking_values?.setting?.driver_privacy_policy
    Linking.openURL(url).catch(err => err)
  }

  return (
    <View>
      <Text
        style={[styles.title, { color: colors.text, textAlign: textRtlStyle }]}
      >
        {translateData.general}
      </Text>
      <View
        style={[
          styles.listView,
          {
            backgroundColor: isDark ? appColors.primaryFont : appColors.white,
            borderColor: colors.border,
          },
        ]}
      >
        <>
          <ListItem
            icon={<Icons.WalletSetting color={colors.text} />}
            text={translateData.myWallet}
            color={isDark ? appColors.white : appColors.black}
            onPress={() => navigation.navigate('MyWallet')}
            showNextIcon
          />
          {taxidoSettingData?.cabbooking_values?.activation
            ?.driver_subscription == 1 &&
            selfDriver?.role == 'driver' && (
              <>
                <View
                  style={[
                    styles.border,
                    {
                      backgroundColor: isDark
                        ? appColors.bgDark
                        : appColors.lightGray,
                    },
                  ]}
                />
                <ListItem
                  icon={<Icons.Subscription color={colors.text} />}
                  text={translateData.subscriptionPlan}
                  color={isDark ? appColors.white : appColors.black}
                  onPress={() => navigation.navigate('Subscription')}
                  showNextIcon
                />
              </>
            )}

          {selfDriver?.role != 'driver' && (
            <>
              <View
                style={[
                  styles.border,
                  {
                    backgroundColor: isDark
                      ? appColors.bgDark
                      : appColors.lightGray,
                  },
                ]}
              />
              <ListItem
                icon={<Icons.VehicleList color={colors.text} />}
                text={translateData?.manageVehicle}
                color={isDark ? appColors.white : appColors.black}
                onPress={() => navigation.navigate('ManageVehicle')}
                showNextIcon={true}
              />
            </>
          )}

          <View
            style={[
              styles.border,
              {
                backgroundColor: isDark
                  ? appColors.bgDark
                  : appColors.lightGray,
              },
            ]}
          />
          {selfDriver?.role != 'driver' && (
            <>
              <ListItem
                icon={<Icons.Driver color={colors.text} />}
                text={translateData?.manageDriver}
                color={isDark ? appColors.white : appColors.black}
                onPress={() => navigation.navigate('DriverList')}
                showNextIcon={true}
              />

              <View
                style={[
                  styles.border,
                  {
                    backgroundColor: isDark
                      ? appColors.bgDark
                      : appColors.lightGray,
                  },
                ]}
              />
            </>
          )}
          {selfDriver?.role == 'driver' &&
            taxidoSettingData?.cabbooking_values?.activation
              ?.driver_incentive_enable == 1 && (
              <>
                <ListItem
                  icon={<Icons.Incentive color={colors.text} />}
                  text={translateData?.incentive}
                  color={isDark ? appColors.white : appColors.black}
                  onPress={() => navigation.navigate('Incentive')}
                  showNextIcon={true}
                />
                <View
                  style={[
                    styles.border,
                    {
                      backgroundColor: isDark
                        ? appColors.bgDark
                        : appColors.lightGray,
                    },
                  ]}
                />
              </>
            )}
          <ListItem
            icon={<Icons.settingIcon color={colors.text} />}
            text={translateData.appSetting}
            color={isDark ? appColors.white : appColors.black}
            onPress={() => navigation.navigate('AppSettings')}
            showNextIcon
          />

          <View
            style={[
              styles.border,
              {
                backgroundColor: isDark
                  ? appColors.bgDark
                  : appColors.lightGray,
              },
            ]}
          />
          {selfDriver?.service_category_id == 5 && (
            <>
              <ListItem
                icon={<Icons.VehicleList color={colors.text} />}
                text={translateData.rentalVehicle}
                color={isDark ? appColors.white : appColors.black}
                onPress={() => navigation.navigate('VehicleList')}
                showNextIcon
              />
              <View
                style={[
                  styles.border,
                  {
                    backgroundColor: isDark
                      ? appColors.bgDark
                      : appColors.lightGray,
                  },
                ]}
              />
            </>
          )}
          <ListItem
            icon={<Icons.MessageEmpty color={colors.text} />}
            text={translateData.supportTicket}
            color={isDark ? appColors.white : appColors.black}
            onPress={() => navigation.navigate('SupportTicket')}
            showNextIcon
          />
          <View
            style={[
              styles.border,
              {
                backgroundColor: isDark
                  ? appColors.bgDark
                  : appColors.lightGray,
              },
            ]}
          />
          <ListItem
            dot={unreadCount?.myUnread > 0}
            icon={<Icons.HelpSupport color={colors.text} />}
            text={translateData?.chatwithstaf}
            color={isDark ? appColors.white : appColors.black}
            onPress={() =>
              navigation.navigate('Chat', {
                driverId: selfDriver?.id,
                from: 'help',
                riderName: selfDriver?.name,
                setUnreadCount: setUnreadCount,
              })
            }
            showNextIcon
          />

          {taxidoSettingData?.cabbooking_values?.setting
            ?.driver_privacy_policy && (
            <>
              <View
                style={[
                  styles.border,
                  {
                    backgroundColor: isDark
                      ? appColors.bgDark
                      : appColors.lightGray,
                  },
                ]}
              />
              <ListItem
                icon={<Icons.privacyPolicy color={colors.text} />}
                text={translateData.privacyPolicy}
                color={isDark ? appColors.white : appColors.black}
                onPress={gotoPolicy}
                showNextIcon
              />
            </>
          )}
          {taxidoSettingData?.cabbooking_values?.activation?.referral_enable ==
            1 &&
            selfDriver?.role == 'driver' && (
              <>
                <View
                  style={[
                    styles.border,
                    {
                      backgroundColor: isDark
                        ? appColors.bgDark
                        : appColors.lightGray,
                    },
                  ]}
                />
                <ListItem
                  icon={<Icons.Referral1 color={colors.text} />}
                  text={translateData?.erarnMoney}
                  color={isDark ? appColors.white : appColors.primaryFont}
                  onPress={() => navigation.navigate('ReferralHome')}
                  showNextIcon={true}
                />
              </>
            )}
          {selfDriver?.role == 'driver' &&
            taxidoSettingData?.cabbooking_values?.activation
              ?.driver_incentive_enable == 1 && (
              <>
                <View
                  style={[
                    styles.border,
                    {
                      backgroundColor: isDark
                        ? appColors.bgDark
                        : appColors.lightGray,
                    },
                  ]}
                />
                <ListItem
                  icon={<Icons.IncentiveIcon color={colors.text} />}
                  text={translateData?.incentive}
                  color={isDark ? appColors.white : appColors.primaryFont}
                  onPress={() => navigation.navigate('Incentive')}
                  showNextIcon={true}
                />
              </>
            )}
        </>
      </View>
    </View>
  )
}
