water-sys/app/screens/ProfileScreen.tsx

import React, { useState, useEffect, useCallback } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  ImageBackground,
  TouchableOpacity,
  ScrollView,
  Platform,
  StatusBar,
  SafeAreaView,
  Linking,
} from "react-native";
import { useTranslation } from "react-i18next";
import SettingsIcon from "../components/SettingsIcon";
import fontSize from "../utils/fontsizeUtils";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import BookmarkIcon from "../components/BookmarkIcon";
import LeftArrowIcon from "../components/DownArrowIcon";
import { flagMap } from "../utils/flagMap";
import DocumentApprovedIcon from "../components/DocumentApprovedIcon";
import PdfDocumentIcon from "../components/PdfDocumentIcon";
import DocumentClockIcon from "../components/DocumentClockIcon";
import widthUtils from "../utils/widthUtils";
import { productStatus } from "../constants/productStatus";
import useUserStore from "../store/user";

type RootStackParamList = {
  SettingList: undefined;
  Home: undefined;
  MyAccount: undefined;
  Login: undefined;
  Status: { status: number | null };
  BrowseHistoryScreen: undefined;
  AddressList: undefined;
  Collection: undefined;
  Balance: undefined;
  MemberIntroduction: undefined;
};

export const ProfileScreen = () => {
  const handleLogin = async () => {
    navigation.navigate("Login");
  };
  const { user } = useUserStore();
  const { t } = useTranslation();

  const navigation =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();

  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <View style={styles.safeAreaContent}>
        <View style={styles.flexColumnContainer1}>
          {user.user_id ? (
            <ImageBackground
              source={require("../../assets/img/image_b64646d0.png")}
              style={styles.timecardWidget}
              resizeMode="stretch"
            >
              <View style={styles.flexRowWithContent}>
                <Image
                  source={flagMap.get(user?.country_en)}
                  style={styles.imageContainerWithText}
                />
                <View style={styles.financialInfoContainer}>
                  <Text style={styles.whiteTextHeading}>{user?.currency}</Text>
                  <TouchableOpacity
                    onPress={() => navigation.navigate("SettingList")}
                  >
                    <View style={styles.svgContainer1}>
                      <SettingsIcon size={fontSize(24)} color="white" />
                    </View>
                  </TouchableOpacity>
                </View>
              </View>

              <View style={styles.flexColumnContainer}>
                <View style={styles.flexContainerWithImageAndText}>
                  <View style={styles.flexRowWithContent1}>
                    <Image
                      source={require("../../assets/img/image_94051480.jpeg")}
                      style={styles.profileImageCircle}
                    />
                    <View style={styles.customerInfoPanel}>
                      <View>
                        <Text style={styles.uniqueHeaderTextStyle}>
                          {user?.username}
                        </Text>
                        <Text style={styles.elegantText}>
                          ID: {user?.user_id}
                        </Text>
                      </View>
                      {user.user_id && (
                        <TouchableOpacity
                          style={styles.transactionSummaryBox}
                          onPress={() => navigation.navigate("Balance")}
                        >
                          <View style={styles.svgContainer}>
                            <BookmarkIcon size={fontSize(24)} />
                          </View>
                          <Text style={styles.soldeTextDisplayStyle}>余额</Text>
                        </TouchableOpacity>
                      )}
                    </View>
                  </View>
                </View>

                <View style={styles.gradientCardContainer}>
                  <ImageBackground
                    source={require("../../assets/img/image_7dbf30dc.png")}
                    style={styles.promoCardContainer2}
                    resizeMode="stretch"
                  >
                    <View style={styles.promoCardContainerVip}>
                      <View style={styles.VipCard}>
                        <View style={styles.Vip}>
                          <Text style={styles.goldenItalicHeading}>
                            VIP{user?.vip_level}
                          </Text>
                          <View style={styles.vipContainer}>
                            <Image
                              source={require("../../assets/img/折扣VIP1 (1).png")}
                              style={styles.VipImg}
                            />
                            <Text style={styles.discountPercentageTextStyle}>
                              {((1 - user?.vip_discount) * 100).toFixed(0)}%
                            </Text>
                          </View>
                        </View>
                        <View style={styles.progressBar}>
                          <View style={styles.progressBarFill}>
                            <Text style={styles.progressBarText}>
                              40000/50000
                            </Text>
                          </View>
                          <View style={styles.progressBarLine}></View>
                        </View>
                      </View>
                      <View style={styles.vipExplanation}>
                        <View style={styles.vipExplanationText}>
                          <Text style={styles.vipExplanationText1}>
                            {t("profile.vip.next_level_info")}
                          </Text>
                        </View>
                        <TouchableOpacity
                          style={styles.vipExplanationButton}
                          onPress={() =>
                            navigation.navigate("MemberIntroduction")
                          }
                        >
                          <Text style={styles.vipExplanationButtonText}>
                            {t("profile.learn_more")}
                          </Text>
                        </TouchableOpacity>
                      </View>
                    </View>
                  </ImageBackground>
                </View>
              </View>
            </ImageBackground>
          ) : (
            <ImageBackground
              source={require("../../assets/img/image_b64646d0.png")}
              style={styles.timecardWidget}
              resizeMode="stretch"
            >
              <View style={styles.flexRowWithContent}>
                <View style={styles.financialInfoContainer}>
                  <TouchableOpacity
                    onPress={() => navigation.navigate("SettingList")}
                  >
                    <View style={styles.svgContainer1}>
                      <SettingsIcon size={fontSize(24)} color="white" />
                    </View>
                  </TouchableOpacity>
                </View>
              </View>

              <View style={styles.notLoggedInContainer}>
                <View style={styles.profileImageCircle}>
                  <Image
                    source={require("../../assets/img/brainnel-0000.jpg")}
                    style={styles.profileImage}
                  />
                </View>
                <TouchableOpacity
                  style={styles.loginButton}
                  onPress={handleLogin}
                >
                  <Text style={styles.loginButtonText}>{t("login.now")}</Text>
                </TouchableOpacity>
              </View>
            </ImageBackground>
          )}

          {/* <View style={styles.verticalCenterImageGallery}>
            <TouchableOpacity onPress={handleLogin}>
              <Text>{t("login.button")}</Text>
              <TouchableOpacity
                style={styles.loginButton}
                onPress={() =>
                  Linking.openURL("exp://192.168.0.101:8084/--/payment-success")
                }
              >
                <Text style={styles.loginButtonText}>{t("test.payment.callback")}</Text>
              </TouchableOpacity>
            </TouchableOpacity>
          </View> */}

          <ScrollView
            showsVerticalScrollIndicator={false}
            style={{ flex: 1 }}
            bounces={false}
            overScrollMode="never"
          >
            <View style={styles.groupContainer}>
              <View style={styles.groupItemList}>
                <View style={styles.groupItemTitle}>
                  <Text style={styles.groupItemTitleText}>
                    {t("order.title")}
                  </Text>
                  <TouchableOpacity
                    style={styles.groupItemTitleTextTout}
                    onPress={() =>
                      navigation.navigate("Status", { status: null })
                    }
                  >
                    <Text style={styles.groupItemTitleTextTout1}>
                      {t("all")}
                    </Text>
                    <LeftArrowIcon size={fontSize(14)} color="#8f8684" />
                  </TouchableOpacity>
                </View>

                <View style={styles.groupItem}>
                  {productStatus.map((item, index) => (
                    <TouchableOpacity
                      key={index}
                      style={styles.groupItemContent}
                      onPress={() =>
                        item.status !== null
                          ? navigation.navigate("Status", {
                              status: item.status,
                            })
                          : null
                      }
                    >
                      <View style={styles.groupItemContentIcon}>
                        <item.icon size={fontSize(38)} color="#707070" />
                      </View>
                      <Text style={styles.groupItemContentText}>
                        {t(item.textKey)}
                      </Text>
                    </TouchableOpacity>
                  ))}
                </View>
              </View>
            </View>

            <View style={styles.groupContainer}>
              <View style={styles.groupItemList}>
                <View style={styles.groupItemTitle}>
                  <Text style={styles.groupItemTitleText}>
                    {t("tool.title")}
                  </Text>
                </View>

                <View style={styles.groupItem}>
                  <View style={styles.groupItemContent}>
                    <TouchableOpacity
                      style={styles.groupItemContentIcon}
                      onPress={() => navigation.navigate("BrowseHistoryScreen")}
                    >
                      <DocumentApprovedIcon
                        size={fontSize(38)}
                        color="#707070"
                      />
                    </TouchableOpacity>
                    <Text style={styles.groupItemContentText}>
                      {t("browse.history")}
                    </Text>
                  </View>

                  <View style={styles.groupItemContent}>
                    <TouchableOpacity
                      style={styles.groupItemContentIcon}
                      onPress={() => navigation.navigate("Collection")}
                    >
                      <PdfDocumentIcon size={fontSize(38)} color="#707070" />
                    </TouchableOpacity>
                    <Text style={styles.groupItemContentText}>
                      {t("collection")}
                    </Text>
                  </View>

                  <TouchableOpacity
                    style={styles.groupItemContent}
                    onPress={() => navigation.navigate("AddressList")}
                  >
                    <View style={styles.groupItemContentIcon}>
                      <DocumentClockIcon size={fontSize(38)} color="#707070" />
                    </View>
                    <Text style={styles.groupItemContentText}>
                      {t("address.management")}
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </ScrollView>

          {/* Login Button at bottom of screen */}
          <TouchableOpacity
            style={styles.fixedLoginButton}
            onPress={handleLogin}
          >
            <Text style={styles.loginButtonText}>{t("login.now")}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: "#fff",
  },
  safeAreaContent: {
    flex: 1,
    paddingTop: Platform.OS === "android" ? 0 : 0,
  },
  flexColumnContainer1: {
    flex: 1,
  },
  timecardWidget: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    width: "100%",
    height: widthUtils(272, 272).height,
    overflow: "hidden",
  },

  timeContainer1: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    height: widthUtils(43, 43).height,
    paddingTop: 21,
  },
  timeContainer2: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    alignSelf: "stretch",
    justifyContent: "space-between",
  },
  timeContainer: {
    display: "flex",
    flex: 1,
    flexDirection: "row",
    gap: 10,
    alignItems: "center",
    justifyContent: "center",
    minWidth: 153,
    paddingRight: 6,
    paddingLeft: 16,
  },
  timeDisplayStyle: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(17),
    fontWeight: "600",
    fontFamily:
      "SF Pro, -apple-system, system-ui, BlinkMacSystemFont, sans-serif",
    color: "white",
  },
  timeDisplayContainer: {
    width: widthUtils(10, 124).width,
    height: widthUtils(10, 124).height,
  },
  timeDisplayContainer1: {
    flex: 1,
    width: widthUtils(13, 153).width,
    height: widthUtils(13, 153).height,
  },
  flexColumnContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingVertical: 12,
    paddingHorizontal: 20,
    paddingBottom: 3.5,
    flex: 1,
  },
  flexContainerWithImageAndText: {
    display: "flex",
    flexDirection: "row",
    gap: 8,
    alignItems: "flex-start",
    justifyContent: "space-between",
  },
  flexRowWithContent: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-end",
    paddingRight: 10,
    paddingTop: 10,
  },
  flexRowWithContent1: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  profileImageCircle: {
    width: widthUtils(100, 100).width,
    height: widthUtils(100, 100).height,
    borderWidth: 0,
    backgroundColor: "#fff",
    borderRadius: 50,
    padding: 10,
  },
  profileImage: {
    width: "100%",
    height: "100%",
    resizeMode: "contain",
  },
  customerInfoPanel: {
    marginLeft: 20,
  },
  uniqueHeaderTextStyle: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(20),
    fontWeight: "900",
    fontFamily: "Archivo Black, sans-serif",
    color: "white",
  },
  elegantText: {
    padding: 0,
    margin: 0,
    marginTop: 6.75,
    fontSize: fontSize(16),
    fontWeight: "900",
    fontFamily: "PingFang SC",
    lineHeight: 22,
    color: "white",
  },
  transactionSummaryBox: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 8,
  },
  svgContainer: {
    display: "flex",
    width: widthUtils(24, 24).width,
    height: widthUtils(24, 24).height,
    color: "#ffffff",
    marginRight: 8,
  },
  soldeTextDisplayStyle: {
    padding: 0,
    margin: 0,
    marginLeft: 3,
    fontSize: fontSize(16),
    fontWeight: "500",
    fontFamily: "PingFang SC",
    lineHeight: 22,
    color: "white",
  },
  imageContainerWithText: {
    width: widthUtils(16, 24).width,
    height: widthUtils(16, 24).height,
    borderWidth: 0,
    resizeMode: "cover",
  },
  financialInfoContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginLeft: 3,
  },
  whiteTextHeading: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(16),
    fontWeight: "500",
    fontFamily: "PingFang SC",
    lineHeight: 22,
    color: "white",
  },
  svgContainer1: {
    width: widthUtils(24, 24).width,
    height: widthUtils(24, 24).height,
    marginLeft: 11,
    color: "#ffffff",
  },
  gradientCardContainer: {
    position: "absolute",
    bottom: 0,
    left: 19,
    right: 19,
    backgroundColor: "#3A3128",
    borderRadius: 10,
    marginBottom: Platform.OS === "ios" ? -18 : -15,
    zIndex: 1,
  },
  promoCardContainer2: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    height: widthUtils(130, 130).height,
    paddingRight: 9.5,
    paddingBottom: 15,
    paddingLeft: 9,
    width: "100%",
  },
  promoCardContainerVip: {
    width: "100%",
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 10,
    paddingRight: 10,
    height: "100%",
  },
  VipCard: {
    width: "100%",
    height: "50%",
    flexDirection: "row",
  },
  Vip: {
    width: "35%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  progressBar: {
    width: "65%",
    marginLeft: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  progressBarFill: {
    width: "100%",
    height: "50%",
  },
  progressBarText: {
    fontSize: fontSize(16),
    fontWeight: "900",
    fontFamily: "Segoe UI",
    color: "#fcca80",
  },
  progressBarLine: {
    width: "100%",
    height: 3,
    backgroundColor: "#d9d9d9",
  },
  vipExplanation: {
    width: "100%",
    height: "50%",
    flexDirection: "row",
    alignItems: "center",
  },
  vipExplanationText: {
    width: "70%",
    height: "100%",
  },
  vipExplanationText1: {
    fontSize: fontSize(14),
    padding: 5,
    color: "#fff",
  },
  vipExplanationButton: {
    width: "30%",
    height: "100%",
    backgroundColor: "#ffd89b",
    borderRadius: 60,
    alignItems: "center",
    justifyContent: "center",
  },
  vipExplanationButtonText: {
    fontSize: fontSize(14),
  },
  vipContainer: {
    position: 'relative',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
  },
  VipImg: {
    width: widthUtils(28, 28).width,
    height: widthUtils(28, 28).height,
  },
  discountPercentageTextStyle: {
    position: 'absolute',
    fontSize: fontSize(12),
    fontFamily: "Segoe UI",
    fontWeight: "900",
    fontStyle: "italic",
    color: "#4e2000",
    textAlign: 'center',
  },
  productInfoContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
  },
  imageWithTextRatio: {
    width: widthUtils(23.5, 56).width,
    height: widthUtils(23.5, 56).height,
  },
  goldenItalicHeading: {
    fontSize: fontSize(34),
    fontWeight: "900",
    fontStyle: "italic",
    color: "#f8cb7a",
  },
  discountSectionContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    marginLeft: 4,
  },
  discountAmountContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  negativeMarginTopDiscountPercentage: {
    marginTop: -22,
  },
  nestedContentContainer: {
    marginTop: -25,
  },
  negativeMarginTop2: {
    marginTop: -36,
  },
  imageContainer2: {
    width: widthUtils(36, 36).width,
    height: widthUtils(36, 36).height,
  },
  negativeMarginTop1: {
    marginTop: -36,
  },
  imgStyleF62: {
    width: "100%",
    height: widthUtils(36, 36).height,
  },
  discountStatusContainer: {
    paddingRight: 7,
    paddingLeft: 7,
    marginTop: -23,
  },
  discountStatusLabel: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(10),
    fontWeight: "600",
    fontStyle: "italic",
    fontFamily: "Segoe UI",
    color: "#4e2000",
  },
  productSummaryBlock: {
    paddingTop: 4,
    paddingBottom: 6.5,
    marginLeft: 16,
  },
  goldenTextHeading: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(13),
    fontWeight: "600",
    fontFamily: "PingFang SC",
    color: "#f8cb7a",
  },
  negativeMarginTop: {
    marginTop: -0.5,
  },
  horizontalLineWidget: {
    width: widthUtils(4, 235).width,
    height: widthUtils(4, 235).height,
  },
  promoCardContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "stretch",
    justifyContent: "flex-start",
    height: widthUtils(34, 34).height,
    marginTop: 6,
  },
  promoCardContainer1: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-end",
  },
  pingfangScTextWhite: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(11),
    fontWeight: "400",
    fontFamily: "PingFang SC",
    lineHeight: 17,
    color: "white",
    textAlign: "left",
    letterSpacing: -0.1,
  },
  promoDetailsContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: -17,
  },
  goldenLabel: {
    width: "30%",
    padding: 0,
    margin: 0,
    fontSize: fontSize(12),
    fontWeight: "900",
    fontFamily: "MiSans",
    lineHeight: 15,
    color: "#f5c164",
  },
  goldenText: {
    width: "70%",
    padding: 0,
    paddingRight: 24,
    paddingLeft: 37,
    margin: 0,
    fontSize: fontSize(12),
    fontWeight: "900",
    fontFamily: "MiSans",
    lineHeight: 15,
    color: "#f5c164",
  },
  goldenGradientBox: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    paddingRight: 6,
    paddingLeft: 6,
    marginLeft: 11,
    backgroundColor: "#F5C164",
    borderRadius: 50,
  },
  featuredText: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(11),
    fontWeight: "700",
    fontFamily: "Source Han Sans CN",
    color: "#473c30",
  },
  verticalCenterImageGallery: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    paddingTop: 21.5,
    paddingRight: 20,
    paddingLeft: 20,
    backgroundColor: "#f0f0f0",
  },
  cardContainer1: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingTop: 14,
    paddingRight: 9,
    paddingBottom: 14,
    paddingLeft: 10,
    backgroundColor: "white",
    borderRadius: 10,
  },
  imageContainer: {
    height: widthUtils(212, 212).height,
    borderWidth: 0,
    resizeMode: "cover",
  },
  cardContainer: {
    paddingTop: 15,
    paddingRight: 11,
    paddingBottom: 17,
    paddingLeft: 11,
    marginTop: 20,
    backgroundColor: "white",
    borderRadius: 10,
  },
  imageContainer1: {
    width: "100%",
    height: widthUtils(228, 228).height,
    borderWidth: 0,
    resizeMode: "cover",
  },
  groupContainer: {
    padding: 20,
  },
  groupItemList: {
    width: "100%",
    alignItems: "center",
    backgroundColor: "white",
    padding: 15,
  },
  groupItemTitle: {
    flexDirection: "row",
    width: "100%",
    justifyContent: "space-between",
    alignItems: "center",
  },
  groupItemTitleText: {
    fontSize: fontSize(18),
    fontWeight: "600",
    color: "#000",
  },
  groupItemTitleTextTout: {
    fontSize: fontSize(16),
    fontWeight: "400",
    color: "#8f8684",
    flexDirection: "row",
    alignItems: "center",
  },
  groupItemTitleTextTout1: {
    marginRight: 3,
    fontSize: fontSize(16),
    fontWeight: "400",
    color: "#8f8684",
    flexDirection: "row",
    alignItems: "center",
  },
  groupItem: {
    flexDirection: "row",
    flexWrap: "wrap",
    width: "100%",
    marginTop: 25,
  },
  groupItemContent: {
    width: "23%",
    borderRadius: 8,
    marginLeft: 5,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    marginBottom: 10,
  },
  groupItemContentText: {
    fontSize: fontSize(12),
    fontWeight: "400",
    color: "#8f8684",
    width: "100%",
    textAlign: "center",
  },
  groupItemContentIcon: {
    width: widthUtils(35, 40).width,
    height: widthUtils(35, 40).height,
  },
  notLoggedInContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingBottom: 40,
  },
  loginButton: {
    backgroundColor: "#ff701e",
    paddingHorizontal: 30,
    paddingVertical: 10,
    borderRadius: 20,
    marginTop: 20,
  },
  loginButtonText: {
    color: "#fff",
    fontSize: fontSize(16),
    fontWeight: "600",
  },
  fixedLoginButton: {
    backgroundColor: "#ff701e",
    paddingHorizontal: 30,
    paddingVertical: 10,
    borderRadius: 20,
    position: "absolute",
    bottom: 20,
    alignSelf: "center",
    elevation: 5,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
});