water-sys/app/screens/ProfileScreen.tsx

import React from "react";
import { View, Text, Image, StyleSheet, ImageBackground,TouchableOpacity } from "react-native";
import SettingsIcon from "../components/SettingsIcon";
import fontSize from "../utils/fontsizeUtils";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { userApi } from '../services/api/userApi';
import { settingApi } from '../services/api/setting';
import AsyncStorage from '@react-native-async-storage/async-storage';
type RootStackParamList = {
  SettingList: undefined;
  Home: undefined;
};

export const ProfileScreen = () => {
  const handleLogin = async () => {
    const data =  settingApi.postFirstLogin(221)
    console.log(data);
    
    const params = {
      grant_type:'password',
      username:'test',
      password:'string',
      client_id:'2',
      client_secret:'',
      scope:'',
    }
    const res = await userApi.login(params);
    const token = res.token_type + ' ' + res.access_token;
    await AsyncStorage.setItem('token', token);
    navigation.navigate('Home');
  }

  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  return (
    <View style={styles.flexColumnContainer1}>
      <ImageBackground
        source={require("../../assets/img/image_8e319050.png")}
        style={styles.timecardWidget}
        resizeMode="cover"
      >
        <View style={styles.flexColumnContainer}>
          <View style={styles.flexContainerWithImageAndText}>
            <View style={styles.flexRowWithContent}>
              <Image
                source={require("../../assets/img/image_94051480.jpeg")}
                style={styles.profileImageCircle}
              />
              <View style={styles.customerInfoPanel}>
                <View>
                  <Text style={styles.uniqueHeaderTextStyle}>Bellael</Text>
                  <Text style={styles.elegantText}>ID: 11</Text>
                </View>
                <View style={styles.transactionSummaryBox}>
                  <View style={styles.svgContainer}>
                    {/* SVG would be replaced with a React Native SVG component or an image */}
                  </View>
                  <Text style={styles.soldeTextDisplayStyle}>Solde</Text>
                </View>
              </View>
            </View>
            <View style={styles.flexRowWithContent}>
              <Image
                source={require("../../assets/img/image_d9d8fe1f.png")}
                style={styles.imageContainerWithText}
              />
              <View style={styles.financialInfoContainer}>
                <Text style={styles.whiteTextHeading}>FCFA</Text>
                <TouchableOpacity onPress={() => navigation.navigate("SettingList")}>
                  <View style={styles.svgContainer1}>
                    <SettingsIcon size={fontSize(24)} color="white" />
                  </View>
                </TouchableOpacity>
              </View>
            </View>
          </View>
          <View style={styles.gradientCardContainer}>
            <ImageBackground
              source={require("../../assets/img/image_7dbf30dc.png")}
              style={styles.promoCardContainer2}
              resizeMode="cover"
            >
              <View style={styles.promoCardContainer2}>
                <View style={styles.flexRowWithContent}>
                  <View style={styles.productInfoContainer}>
                    <Image
                      source={require("../../assets/img/image_7263ddf4.png")}
                      style={styles.imageWithTextRatio}
                    />
                    <Text style={styles.goldenItalicHeading}>2</Text>
                  </View>
                  <View style={styles.discountSectionContainer}>
                    <View style={styles.nestedContentContainer}>
                      {/* <Image 
                        source={require('../../assets/img/image_124ce882.png')} 
                        style={[styles.negativeMarginTop1, styles.imgStyleF62]} 
                      />
                      <View style={styles.negativeMarginTop2}>
                        <Image 
                          source={require('../../assets/img/image_124ce882.png')} 
                          style={styles.imageContainer2} 
                        />
                      </View> */}
                      {/* <View style={styles.negativeMarginTop2}>
                        <Image 
                          source={require('../../assets/img/image_124ce882.png')} 
                          style={styles.imageContainer2} 
                        />
                      </View>
                      <View style={styles.negativeMarginTop2}>
                        <Image 
                          source={require('../../assets/img/image_124ce882.png')} 
                          style={styles.imageContainer2} 
                        />
                      </View> */}
                      {/* <View style={styles.negativeMarginTop2}>
                        <Image 
                          source={require('../../assets/img/image_124ce882.png')} 
                          style={styles.imageContainer2} 
                        />
                      </View> */}
                    </View>
                  </View>
                  <View style={styles.productSummaryBlock}>
                    <Text style={styles.goldenTextHeading}>40000/50000</Text>
                    <View style={styles.negativeMarginTop}></View>
                  </View>
                </View>
                <View style={styles.promoCardContainer}></View>
              </View>
            </ImageBackground>
          </View>
        </View>
      </ImageBackground>
      <View style={styles.verticalCenterImageGallery}>
        <TouchableOpacity onPress={handleLogin}>
          <Text>登录</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  flexColumnContainer1: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    backgroundColor: "#f0f0f0",
    width: "100%",
  },
  timecardWidget: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    height: 273,
  },
  timeContainer1: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    height: 43,
    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: 17,
    fontWeight: "600",
    fontFamily:
      "SF Pro, -apple-system, system-ui, BlinkMacSystemFont, sans-serif",
    color: "white",
  },
  timeDisplayContainer: {
    width: 124,
    height: 10,
  },
  timeDisplayContainer1: {
    flex: 1,
    width: 153,
    height: 13,
  },
  flexColumnContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingVertical: 12,
    paddingHorizontal: 20,
    paddingBottom: 3.5,
  },
  flexContainerWithImageAndText: {
    display: "flex",
    flexDirection: "row",
    gap: 8,
    alignItems: "flex-start",
    justifyContent: "space-between",
  },
  flexRowWithContent: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  profileImageCircle: {
    width: 70,
    height: 70,
    borderWidth: 0,
    borderRadius: 35,
    resizeMode: "cover",
  },
  customerInfoPanel: {
    marginLeft: 15,
  },
  uniqueHeaderTextStyle: {
    padding: 0,
    margin: 0,
    fontSize: 20,
    fontWeight: "400",
    fontFamily: "Archivo Black, sans-serif",
    color: "white",
  },
  elegantText: {
    padding: 0,
    margin: 0,
    marginTop: 6.75,
    fontSize: 16,
    fontWeight: "500",
    fontFamily: "PingFang SC",
    lineHeight: 22,
    color: "white",
  },
  transactionSummaryBox: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 8,
  },
  svgContainer: {
    display: "flex",
    width: 24,
    height: 24,
    color: "#ffffff",
  },
  soldeTextDisplayStyle: {
    padding: 0,
    margin: 0,
    marginLeft: 3,
    fontSize: 16,
    fontWeight: "500",
    fontFamily: "PingFang SC",
    lineHeight: 22,
    color: "white",
  },
  imageContainerWithText: {
    width: 24,
    height: 16,
    borderWidth: 0,
    resizeMode: "cover",
  },
  financialInfoContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginLeft: 3,
  },
  whiteTextHeading: {
    padding: 0,
    margin: 0,
    fontSize: 16,
    fontWeight: "500",
    fontFamily: "PingFang SC",
    lineHeight: 22,
    color: "white",
  },
  svgContainer1: {
    display: "flex",
    width: 24,
    height: 24,
    marginLeft: 11,
    color: "#ffffff",
  },
  gradientCardContainer: {
    marginTop: 10,
    backgroundColor: "#3A3128",
    borderRadius: 10,
  },
  promoCardContainer2: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    height: 99,
    paddingTop: 8,
    paddingRight: 9.5,
    paddingBottom: 15,
    paddingLeft: 9,
  },
  productInfoContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
  },
  imageWithTextRatio: {
    width: 56,
    height: 23.5,
  },
  goldenItalicHeading: {
    padding: 0,
    paddingBottom: 2.75,
    margin: 0,
    marginLeft: 1,
    fontSize: 34,
    fontWeight: "900",
    fontStyle: "italic",
    fontFamily: "Segoe UI",
    lineHeight: 22,
    color: "#f8cb7a",
  },
  discountSectionContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    marginLeft: 4,
  },
  discountAmountContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  discountPercentageTextStyle: {
    padding: 0,
    margin: 0,
    fontSize: 12,
    fontWeight: "900",
    fontStyle: "italic",
    fontFamily: "Segoe UI",
    color: "#4e2000",
  },
  negativeMarginTopDiscountPercentage: {
    marginTop: -22,
  },
  nestedContentContainer: {
    marginTop: -25,
  },
  negativeMarginTop2: {
    marginTop: -36,
  },
  imageContainer2: {
    width: 36,
    height: 36,
  },
  negativeMarginTop1: {
    marginTop: -36,
  },
  imgStyleF62: {
    width: "100%",
    height: 36,
  },
  discountStatusContainer: {
    paddingRight: 7,
    paddingLeft: 7,
    marginTop: -23,
  },
  discountStatusLabel: {
    padding: 0,
    margin: 0,
    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: 13,
    fontWeight: "600",
    fontFamily: "PingFang SC",
    color: "#f8cb7a",
  },
  negativeMarginTop: {
    marginTop: -0.5,
  },
  horizontalLineWidget: {
    width: 235,
    height: 4,
  },
  promoCardContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "stretch",
    justifyContent: "flex-start",
    height: 34,
    marginTop: 6,
  },
  promoCardContainer1: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-end",
  },
  pingfangScTextWhite: {
    padding: 0,
    margin: 0,
    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: 12,
    fontWeight: "900",
    fontFamily: "MiSans",
    lineHeight: 15,
    color: "#f5c164",
  },
  goldenText: {
    width: "70%",
    padding: 0,
    paddingRight: 24,
    paddingLeft: 37,
    margin: 0,
    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: 11,
    fontWeight: "700",
    fontFamily: "Source Han Sans CN",
    color: "#473c30",
  },
  verticalCenterImageGallery: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    paddingTop: 21.5,
    paddingRight: 20,
    paddingBottom: 118,
    paddingLeft: 20,
  },
  cardContainer1: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingTop: 14,
    paddingRight: 9,
    paddingBottom: 14,
    paddingLeft: 10,
    backgroundColor: "white",
    borderRadius: 10,
  },
  imageContainer: {
    height: 212,
    borderWidth: 0,
    resizeMode: "cover",
  },
  cardContainer: {
    paddingTop: 15,
    paddingRight: 11,
    paddingBottom: 17,
    paddingLeft: 11,
    marginTop: 20,
    backgroundColor: "white",
    borderRadius: 10,
  },
  imageContainer1: {
    width: "100%",
    height: 228,
    borderWidth: 0,
    resizeMode: "cover",
  },
});