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

export default function WelcomeHeader({
  onMenuPress,
  menuOpen,
}: {
  onMenuPress: any;
  menuOpen: boolean;
}) {
  const { t } = useTranslation();

  // Icon rotation animatsiyasi
  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]);

  // Rotation interpolation
  const rotation = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '90deg'],
  });

  return (
    <View style={styles.header}>
      <View style={styles.headerContent}>
        <View style={styles.logoBox}>
          <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 />

          <TouchableOpacity onPress={onMenuPress} style={styles.menuBtn} activeOpacity={0.7}>
            <Animated.View
              style={[
                styles.hamburger,
                {
                  transform: [{ rotate: rotation }, { scale: scaleAnim }],
                },
              ]}
            >
              {menuOpen ? (
                <AntDesign name="close" size={22} color="#374151" />
              ) : (
                <AntDesign name="menu" size={22} color="#374151" />
              )}
            </Animated.View>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}