headerprofille

import React, { useState, useEffect } from 'react';
import { Animated, Dimensions, StyleSheet, View, Text, Image } from 'react-native';
import ButtonFollow from '@/components/FollowButton/followButton';
import UserInformations from '@/components/userInformations/userInformations';
import { useUserViewModel } from '../../context/user/viewModel';
import { useVerifyFollowingViewModel } from '../../context/following/viewModel';
import { IconButton } from 'native-base';
import { MaterialIcons } from '@expo/vector-icons';
import { router } from 'expo-router';
import loadingGif from '@/../../assets/images/giffyBranco.gif';
import defaultProfileImage from '@/assets/images/profileUser_black.jpg';
import { Colors } from '@/constants/Colors';
import { useToggleViewModel } from '@/context/toggleFollow/viewModel';

const { width, height } = Dimensions.get('window');
const Header_Max_Height = height * 0.30;
const Header_Min_Height = height * 0.10;
const Scroll_Distance = Header_Max_Height - Header_Min_Height;

interface DynamicHeaderProps {
  value: Animated.Value;
  id?: number | null;
  isOwnProfile: boolean;
  profilePhoto: string;
}

const DynamicHeader: React.FC<DynamicHeaderProps> = ({ value, id, isOwnProfile }) => {
  const { userName, firstName, isLoading, profilePhoto } = useUserViewModel(id);

  const [isFollowing, setIsFollowing] = useState(false);

  const { isLoadingViewModel, isFollowing: followingStatus } = id !== null && !isOwnProfile ? useVerifyFollowingViewModel(id) : { isLoadingViewModel: false, isFollowing: false };

  const { toggleFollow } = id !== null && !isOwnProfile ? useToggleViewModel(id) : { toggleFollow: null };

  useEffect(() => {
    if (!isOwnProfile && id != null) {
      setIsFollowing(followingStatus);
    }
  }, [followingStatus, id, isOwnProfile]);

  const handleToggleFollow = async () => {
    try {
      if (id != null && toggleFollow) {
        await toggleFollow();
        setIsFollowing(!isFollowing);
      }
    } catch (error) {
      console.error("Erro ao atualizar o status de seguir:", error);
    }
  };

  const animatedHeaderHeight = value.interpolate({
    inputRange: [0, Scroll_Distance],
    outputRange: [Header_Max_Height, Header_Min_Height],
    extrapolate: 'clamp',
  });

  const animatedHeaderColor = value.interpolate({
    inputRange: [0, Scroll_Distance],
    outputRange: ['#D8F38C', '#e3f6ae'],
    extrapolate: 'clamp',
  });

  const animatedProfileSize = value.interpolate({
    inputRange: [0, Scroll_Distance],
    outputRange: [width * 0.22, width * 0.10],
    extrapolate: 'clamp',
  });

  const animatedTitleSize = value.interpolate({
    inputRange: [0, Scroll_Distance],
    outputRange: [width * 0.06, width * 0.06],
    extrapolate: 'clamp',
  });

  const profileImageSource = profilePhoto ? { uri: profilePhoto } : defaultProfileImage;

  if (isLoading) {
    return (
      <View style={[styles.loadingContainer, StyleSheet.absoluteFillObject]}>
        <Image source={loadingGif} style={styles.loadingImage} resizeMode="contain" />
        <Text style={styles.loadingText}>LYRA</Text>
      </View>
    );
  }

  return (
    <Animated.View
      style={[
        styles.header,
        {
          height: animatedHeaderHeight,
          backgroundColor: animatedHeaderColor,
        },
      ]}
    >
      <Animated.View style={styles.headerContent}>
        <Animated.Image
          source={profileImageSource}
          style={[
            styles.fotoPerfil,
            {
              width: animatedProfileSize,
              height: animatedProfileSize,
            },
          ]}
        />
        <View style={styles.textContainer}>
          <Animated.Text
            style={[
              styles.title,
              {
                fontSize: animatedTitleSize,
              },
            ]}
          >
            {userName}
          </Animated.Text>
          <Animated.Text style={styles.nome}>{firstName}</Animated.Text>
        </View>

        {!isOwnProfile && !isLoadingViewModel && (
          <Animated.View style={styles.button}>
            <ButtonFollow
              title={followingStatus ? 'Seguindo' : 'Seguir'}
              onPress={handleToggleFollow}
              color={followingStatus ? Colors.primary : 'gray'}
            />
          </Animated.View>
        )}

        {isOwnProfile && (
          <View>
            <IconButton
              colorScheme={'light'}
              _icon={{ as: MaterialIcons, name: 'menu', size: 10 }}
              style={{ position: 'absolute', top: -height * 0.05, right: 3 }}
              onPress={() => router.push('/editProfileAndConfigs')}
            />
          </View>
        )}

        <UserInformations id={id} />
      </Animated.View>
    </Animated.View>
  );
};

export default DynamicHeader;

const styles = StyleSheet.create({
  header: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    borderBottomLeftRadius: width * 0.10,
    borderBottomRightRadius: width * 0.10,
  },
  headerContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: '5%',
    width: '100%',
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
  },
  title: {
    color: 'black',
    fontWeight: 'bold',
    marginLeft: 10,
  },
  textContainer: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    flex: 1,
  },
  fotoPerfil: {
    aspectRatio: 1,
    backgroundColor: 'pink',
    borderRadius: 50,
    marginRight: 10,
  },
  nome: {
    color: '#333',
    textAlign: 'left',
  },
  button: {
    opacity: 1,
    alignContent: 'center',
    right: 40,
  },
  loadingText: {
    color: '#ffffff',
    marginTop: 10,
    fontSize: 25,
    fontWeight: 'bold',
  },
  loadingImage: {
    width: 100,
    height: 100,
  },
});