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

export function AlertZone({ openSheet, openLogoutSheet }: any) {
  const { textRtlStyle, isDark } = useValues()
  const { translateData } = useSelector((state: any) => state.setting)
  const { colors } = useTheme()

  return (
    <>
      <Text
        style={[
          styles.title,
          {
            textAlign: textRtlStyle,
          },
          { color: colors.text, textAlign: textRtlStyle },
        ]}
      >
        {translateData.alertZone}
      </Text>

      <View
        style={[
          styles.main,
          {
            backgroundColor: isDark ? appColors.primaryFont : appColors.white,
            borderColor: colors.border,
          },
        ]}
      >
        <ListItem
          icon={<Icons.Delete />}
          text={translateData.deleteAccount}
          color={isDark ? appColors.white : appColors.black}
          onPress={openSheet}
          showNextIcon={true}
        />
        <View
          style={[
            styles.border,
            {
              backgroundColor: isDark ? appColors.bgDark : appColors.lightGray,
            },
          ]}
        />

        <ListItem
          icon={<Icons.Logout />}
          text={translateData.logout}
          color={isDark ? appColors.white : appColors.black}
          onPress={openLogoutSheet}
          showNextIcon={true}
        />
      </View>
    </>
  )
}
