import { useNavigation, useTheme } from '@react-navigation/native'
import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { useValues } from '../../utils/context'
import styles from './styles'
import Icons from '../../utils/icons/icons'
import commanStyles from '../../style/commanStyles'
import appColors from '../../theme/appColors'
import { windowHeight } from '../../theme/appConstant'

interface HeaderProps {
  title?: string
  style?: any
  icon?: any
  onPress?: any
  boxstyle?: any
}

export function Header({
  title,
  style,
  icon,
  onPress,
  boxstyle,
}: HeaderProps): React.ReactElement {
  const { viewRtlStyle } = useValues()
  const navigation = useNavigation()
  const { colors } = useTheme()
  const { isDark, rtl } = useValues()
  const gotoBack = () => {
    navigation.goBack()
  }
  return (
    <View
      style={[
        styles.header,
        {
          flexDirection: viewRtlStyle,
          justifyContent: 'space-between',
          alignItems: 'center',
          backgroundColor: isDark ? appColors.primaryFont : appColors.white,
        },
        boxstyle,
      ]}
    >
      <View
        style={[
          {
            flexDirection: viewRtlStyle,
            gap: rtl ? windowHeight(12) : windowHeight(8),
          },
          style,
        ]}
      >
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={gotoBack}
          style={[
            commanStyles.backButtonMain,
            {
              backgroundColor: colors.card,
              borderColor: isDark ? appColors.darkborder : appColors.border,
            },
          ]}
        >
          <Icons.Back color={colors.text} />
        </TouchableOpacity>
        <View style={styles.headerTitle}>
          <Text style={[styles.activeRide, { color: colors.text }]}>
            {title}
          </Text>
        </View>
      </View>
      {icon && (
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={onPress}
          style={[
            commanStyles.backButtonMain,
            {
              backgroundColor: colors.card,
              borderColor: isDark ? appColors.darkborder : appColors.border,
            },
          ]}
        >
          {icon}
        </TouchableOpacity>
      )}
    </View>
  )
}
