import { View, Text, TouchableOpacity } from 'react-native'
import React from 'react'
import Icons from '../../../../../utils/icons/icons'
import styles from './styles'
import { useValues } from '../../../../../utils/context'
import { useNavigation, useTheme } from '@react-navigation/native'
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import { RootStackParamList } from '../../../../../navigation/main/types'
import { useSelector } from 'react-redux'
import appColors from '../../../../../theme/appColors'
import commanStyles from '../../../../../style/commanStyles'

type navigation = NativeStackNavigationProp<RootStackParamList>

export function SettingHeader() {
  const { colors } = useTheme()
  const { viewRtlStyle, isDark } = useValues()
  const { navigate, goBack } = useNavigation<navigation>()
  const { translateData } = useSelector((state: any) => state.setting)

  const gotoNotification = () => {
    navigate('Notification')
  }
  const home = () => {
    goBack()
  }

  return (
    <View
      style={[
        styles.main,
        {
          backgroundColor: isDark ? appColors.primaryFont : appColors.white,
          flexDirection: viewRtlStyle,
        },
      ]}
    >
      <View
        style={{
          flexDirection: viewRtlStyle,
          justifyContent: 'space-between',
          gap: 10,
          alignItems: 'center',
        }}
      >
        <TouchableOpacity
          onPress={home}
          style={[
            commanStyles.backButtonMain,
            {
              borderColor: isDark ? appColors.darkborder : appColors.lightGray,
            },
          ]}
          activeOpacity={0.7}
        >
          <Icons.Back color={colors.text} />
        </TouchableOpacity>
        <Text style={[styles.title, { color: colors.text }]}>
          {translateData.settings}
        </Text>
      </View>
      <TouchableOpacity
        onPress={gotoNotification}
        style={[
          commanStyles.backButtonMain,
          {
            backgroundColor: isDark
              ? appColors.darkHeader
              : appColors.lightGray,
            borderColor: isDark ? appColors.darkborder : appColors.lightGray,
          },
        ]}
        activeOpacity={0.7}
      >
        <Icons.Notification color={colors.text} />
      </TouchableOpacity>
    </View>
  )
}
