import { ThemedText } from '@/components/themed-text';
import { styles } from '@/screens/welcome/styles/welcomeStyle';
import LanguageSelect from '@/screens/welcome/ui/LanguageSelect';
import AntDesign from '@expo/vector-icons/AntDesign';
import { useRouter } from 'expo-router';
import React, { useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Animated, TouchableOpacity, View } from 'react-native';

export default function AnnouncementHeader({ menuOpen }: { onMenuPress: any; menuOpen: boolean }) {
  const { t } = useTranslation();
  const router = useRouter();

  const rotateAnim = useRef(new Animated.Value(0)).current;
  const scaleAnim = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    if (menuOpen) {
      Animated.parallel([
        Animated.spring(rotateAnim, {
          toValue: 1,
          tension: 100,
          friction: 8,
          useNativeDriver: true,
        }),
        Animated.sequence([
          Animated.timing(scaleAnim, {
            toValue: 0.8,
            duration: 100,
            useNativeDriver: true,
          }),
          Animated.spring(scaleAnim, {
            toValue: 1,
            tension: 100,
            friction: 5,
            useNativeDriver: true,
          }),
        ]),
      ]).start();
    } else {
      Animated.parallel([
        Animated.spring(rotateAnim, {
          toValue: 0,
          tension: 100,
          friction: 8,
          useNativeDriver: true,
        }),
        Animated.sequence([
          Animated.timing(scaleAnim, {
            toValue: 0.8,
            duration: 100,
            useNativeDriver: true,
          }),
          Animated.spring(scaleAnim, {
            toValue: 1,
            tension: 100,
            friction: 5,
            useNativeDriver: true,
          }),
        ]),
      ]).start();
    }
  }, [menuOpen]);

  return (
    <View style={styles.header}>
      <View style={styles.headerContent}>
        <View style={styles.logoBox}>
          <TouchableOpacity onPress={() => router.back()}>
            <AntDesign name="left" size={18} color="black" />
          </TouchableOpacity>
          <View style={styles.logoCircle}>
            <ThemedText style={styles.logoText}>IT</ThemedText>
          </View>
          <ThemedText style={styles.brandText}>{t('common.target')}</ThemedText>
        </View>

        <View style={styles.headerRight}>
          <LanguageSelect />
        </View>
      </View>
    </View>
  );
}