import React, { useCallback, useEffect, useState } from "react";
import {
  Image,
  Text,
  View,
  TouchableOpacity,
  ImageBackground,
  Pressable,
} from "react-native";
import { useFocusEffect, useNavigation } from "@react-navigation/native";
import { useDispatch, useSelector } from "react-redux";
import { walletData } from "@src/api/store/actions/walletActions";
import { getValue } from "@src/utils/localstorage";
import { appColors, fontSizes, windowHeight } from "@src/themes";
import { commonStyles } from "../../../../../../styles/commonStyle";
import { external } from "../../../../../../styles/externalStyle";
import { styles } from "./style";
import { useValues } from "@src/utils/context/index";
import { UserContainerSkeleton } from "./userSkeleton";
import Images from "@src/utils/images";

export function UserContainer() {
  const { bgFullStyle, textRTLStyle, viewRTLStyle } = useValues();
  const dispatch = useDispatch();
  const { navigate } = useNavigation();
  const { self } = useSelector((state) => state.account);
  const { walletTypedata } = useSelector((state) => state.wallet);
  const char = self?.name ? self.name.charAt(0) : "";
  const [token, setToken] = useState(null);
  const [loading, setLoading] = useState(true);
  const { translateData } = useSelector((state: any) => state.setting);
  const { zoneValue } = useSelector((state: any) => state.zone);
  const [localImageUri, setLocalImageUri] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      dispatch(walletData());
      const tokenValue = await getValue("token");
      const storedImage = await getValue("profile_image_uri");
      setToken(tokenValue);
      setLocalImageUri(storedImage);
      setLoading(false);
    };
    fetchData();
  }, [dispatch]);

  useFocusEffect(
    useCallback(() => {
      const fetchStoredImage = async () => {
        const storedImage = await getValue("profile_image_uri");
        setLocalImageUri(storedImage);
      };
      fetchStoredImage();
    }, [])
  );

  const navigationProfile = () => {
    if (token) {
      navigate("EditProfile");
    }
  };

  return (
    <View>
      {loading ? (
        <UserContainerSkeleton />
      ) : (
        <>
          <Pressable onPress={navigationProfile}>
            <ImageBackground style={[styles.image]} source={Images.background}>
              <View
                style={[
                  external.fd_row,
                  external.ai_center,
                  {
                    flexDirection: viewRTLStyle,
                    marginHorizontal: windowHeight(20),
                    marginVertical: windowHeight(19),
                  },
                ]}
              >
                <TouchableOpacity
                  onPress={navigationProfile}
                  activeOpacity={0.7}
                >
                  {self?.profile_image_url ? (
                    <Image
                      style={styles.userImage}
                      source={{ uri: self?.profile_image_url }}
                    />
                  ) : (
                    <View style={styles.nameTag}>
                      <Text
                        style={[styles.char, { color: appColors.blackColor }]}
                      >
                        {char || translateData.g}
                      </Text>
                    </View>
                  )}
                </TouchableOpacity>
                {self?.name ? (
                  <View style={styles.userView}>
                    <View>
                      <Text
                        style={[
                          commonStyles.mediumTextBlack,
                          {
                            color: appColors.whiteColor,
                            textAlign: textRTLStyle,
                          },
                        ]}
                      >
                        {self?.name}
                      </Text>
                    </View>
                    <Text
                      style={[
                        commonStyles.regularText,
                        external.mt_3,
                        { textAlign: textRTLStyle },
                      ]}
                    >
                      {self?.email}
                    </Text>
                  </View>
                ) : (
                  <Text
                    style={[
                      commonStyles.mediumTextBlack,
                      { color: appColors.whiteColor, textAlign: textRTLStyle },
                    ]}
                  >
                    {translateData.guest}
                  </Text>
                )}
              </View>
            </ImageBackground>
          </Pressable>
        </>
      )}
    </View>
  );
}
