import {
  Image,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
  Text,
  BackHandler,
} from 'react-native'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { LanguageModal, Notification, DarkTheme, Rtl } from './component/'
import styles from './styles'
import { CustomRadioButton, Header } from '../../../commonComponents'
import { useNavigation, useTheme } from '@react-navigation/native'
import { useDispatch, useSelector } from 'react-redux'
import { languageDataGet, translateDataGet } from '../../../api/store/action'
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetView,
} from '@gorhom/bottom-sheet'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../theme/appConstant'
import appColors from '../../../theme/appColors'
import appFonts from '../../../theme/appFonts'
import { useValues } from '../../../utils/context'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { AppDispatch } from '../../../api/store'

export function AppSettings() {
  const { colors } = useTheme()
  const { translateData, languageData } = useSelector(
    (state: any) => state.setting,
  )
  const dispatch = useDispatch<AppDispatch>()
  const { viewRtlStyle, setRtl, isDark } = useValues()
  const bottomSheetRef = useRef<any>(null)
  const [selectedLanguage, setSelectedLanguage] = useState<string>('en')
  const [tempSelectedLanguage, setTempSelectedLanguage] = useState<string>('en')

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

  useEffect(() => {
    ;(async () => {
      try {
        const storedLanguage = await AsyncStorage.getItem('selectedLanguage')
        const rtlValue = await AsyncStorage.getItem('rtl')

        if (storedLanguage) {
          setSelectedLanguage(storedLanguage)
          setTempSelectedLanguage(storedLanguage)
        }

        if (rtlValue !== null) {
          setRtl(JSON.parse(rtlValue))
        } else {
          setRtl(storedLanguage === 'ar')
        }
      } catch (error) {}
    })()
  }, [])

  const openSheet = () => {
    setTempSelectedLanguage(selectedLanguage)
    bottomSheetRef.current?.expand()
  }

  const renderBackdrop = useCallback(
    (props: any) => (
      <BottomSheetBackdrop
        {...props}
        pressBehavior="close"
        appearsOnIndex={0}
        disappearsOnIndex={-1}
      />
    ),
    [],
  )

  const closeModal = async () => {
    bottomSheetRef.current?.close()
    setSelectedLanguage(tempSelectedLanguage)
    await AsyncStorage.setItem('selectedLanguage', tempSelectedLanguage)
    await AsyncStorage.setItem(
      'rtl',
      JSON.stringify(tempSelectedLanguage === 'ar'),
    )
    setRtl(tempSelectedLanguage === 'ar')
    dispatch(translateDataGet())
  }

  const navigation = useNavigation()

  useEffect(() => {
    const backAction = () => {
      if (navigation.canGoBack()) {
        navigation.goBack()
        return true
      }
      return false
    }

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

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

  return (
    <View
      style={[
        styles.main,
        { backgroundColor: isDark ? appColors.bgDark : appColors.lightGray },
      ]}
    >
      <Header title={translateData.appSetting} style={styles.gap} />

      <View style={styles.container}>
        <View
          style={[
            styles.listContainer,
            {
              backgroundColor: isDark ? appColors.primaryFont : appColors.white,
              borderColor: colors.border,
            },
          ]}
        >
          <>
            <DarkTheme />
            <Rtl />
            <LanguageModal
              openSheet={openSheet}
              tempSelectedLanguage={selectedLanguage}
            />
          </>
        </View>
      </View>

      <BottomSheet
        ref={bottomSheetRef}
        index={-1}
        snapPoints={['62%']}
        backdropComponent={renderBackdrop}
        enablePanDownToClose
        handleIndicatorStyle={{
          backgroundColor: appColors.primary,
          height: windowHeight(0.6),
          width: windowWidth(10),
          marginTop: windowHeight(0.2),
        }}
        containerStyle={{ borderRadius: windowWidth(5) }}
        backgroundStyle={{
          backgroundColor: isDark ? appColors.primaryFont : appColors.white,
        }}
      >
        <BottomSheetView
          style={{
            paddingHorizontal: windowHeight(2),
            marginTop: windowHeight(1),
          }}
        >
          <View
            style={{
              backgroundColor: isDark ? appColors.darkborder : appColors.white,
              borderWidth: windowWidth(0.45),
              borderColor: isDark ? appColors.darkborder : appColors.loader,
              borderRadius: windowWidth(5),
              paddingBottom: windowHeight(2),
            }}
          >
            <Text
              style={{
                color: colors.text,
                textAlign: 'left',
                fontFamily: appFonts.medium,
                fontSize: fontSizes.FONT4HALF,
                marginBottom: windowHeight(1),
                marginTop: windowHeight(2),
                marginHorizontal: windowWidth(4),
              }}
            >
              {translateData.changeLanguage}
            </Text>

            {languageData?.data?.map((item: any, index: number) => (
              <View key={item.locale}>
                <TouchableOpacity
                  style={[styles.modalAlign, { flexDirection: viewRtlStyle }]}
                  onPress={() => setTempSelectedLanguage(item.locale)}
                >
                  <View
                    style={[styles.selection, { flexDirection: viewRtlStyle }]}
                  >
                    <Image
                      source={{ uri: item.flag }}
                      style={styles.imageCountry}
                    />
                    <Text
                      style={[
                        styles.name,
                        {
                          color: colors.text,
                          fontWeight:
                            tempSelectedLanguage === item.locale
                              ? '500'
                              : '300',
                        },
                      ]}
                    >
                      {item.name.toLowerCase()}
                    </Text>
                  </View>
                  <View
                    style={{
                      left: windowHeight(1.5),
                      marginHorizontal: windowWidth(4),
                    }}
                  >
                    <CustomRadioButton
                      selected={tempSelectedLanguage === item.locale}
                    />
                  </View>
                </TouchableOpacity>

                {index !== languageData.data.length - 1 && (
                  <View
                    style={[
                      styles.borderBottom,
                      {
                        backgroundColor: isDark
                          ? appColors.primaryFont
                          : appColors.lightGray,
                      },
                    ]}
                  />
                )}
              </View>
            ))}
          </View>
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={closeModal}
            style={[
              styles.buttonView,
              {
                backgroundColor: isDark ? appColors.white : appColors.black,
              },
            ]}
          >
            <Text
              style={[
                styles.buttonTitle,
                { color: isDark ? appColors.black : appColors.white },
              ]}
            >
              {translateData.update}
            </Text>
          </TouchableOpacity>
        </BottomSheetView>
      </BottomSheet>
    </View>
  )
}
