import React, { useState, useEffect, useCallback } 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, User } from "../services/api/userApi";
import { useFocusEffect } from "@react-navigation/native";
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";
type RootStackParamList = {
  SettingList: undefined;
  Home: undefined;
  MyAccount: undefined;
  Login: undefined;
  Status: { status: number };
};

export const ProfileScreen = () => {
  const handleLogin = async () => {
    navigation.navigate("Login");
    // 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>>();
  const [userInfo, setUserInfo] = useState<User | null>(null);

  const getUserInfo = async () => {
    const res = await userApi.getProfile();
    console.log(res);
    setUserInfo(res);
  };
  useFocusEffect(
    useCallback(() => {
      getUserInfo();
    }, [])
  );
  return (
    <View style={styles.flexColumnContainer1}>
      <ImageBackground
        source={require("../../assets/img/image_8e319050.png")}
        style={styles.timecardWidget}
        resizeMode="cover"
      >
        <View style={styles.flexRowWithContent}>
          <Image
            source={flagMap.get(userInfo?.country_en)}
            style={styles.imageContainerWithText}
          />
          <View style={styles.financialInfoContainer}>
            <Text style={styles.whiteTextHeading}>{userInfo?.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}>
                    {userInfo?.username}
                  </Text>
                  <Text style={styles.elegantText}>
                    ID: {userInfo?.user_id}
                  </Text>
                </View>
                <TouchableOpacity style={styles.transactionSummaryBox} onPress={() => navigation.navigate("MyAccount")}>
                  <View style={styles.svgContainer}>
                    <BookmarkIcon size={fontSize(24)} />
                  </View>
                  <Text style={styles.soldeTextDisplayStyle}>Solde</Text>
                </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.flexRowWithContent1}>
                  <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}>
                      {/* <Text style={styles.goldenTextHeading}>40000/50000</Text> */}
                    </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 style={styles.groupContainer}>
        <View style={styles.groupItemList}>
          <View style={styles.groupItemTitle}>
            <Text style={styles.groupItemTitleText}>
              Mes commandes en cours
            </Text>
            <View style={styles.groupItemTitleTextTout}>
              <Text style={styles.groupItemTitleTextTout1}>tout</Text>
              <LeftArrowIcon size={fontSize(14)} color="#8f8684" />
            </View>
          </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}>{item.text}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </View>

      <View style={styles.groupContainer}>
        <View style={styles.groupItemList}>
          <View style={styles.groupItemTitle}>
            <Text style={styles.groupItemTitleText}>Outils</Text>
          </View>

          <View style={styles.groupItem}>
            <View style={styles.groupItemContent}>
              <View style={styles.groupItemContentIcon}>
                <DocumentApprovedIcon size={fontSize(38)} color="#707070" />
              </View>
              <Text style={styles.groupItemContentText}>等待报价</Text>
            </View>

            <View style={styles.groupItemContent}>
              <View style={styles.groupItemContentIcon}>
                <PdfDocumentIcon size={fontSize(38)} color="#707070" />
              </View>
              <Text style={styles.groupItemContentText}>等待付款</Text>
            </View>
            <View style={styles.groupItemContent}>
              <View style={styles.groupItemContentIcon}>
                <DocumentClockIcon size={fontSize(38)} color="#707070" />
              </View>
              <Text style={styles.groupItemContentText}>运费</Text>
            </View>
            <View style={styles.groupItemContent}>
              <View style={styles.groupItemContentIcon}>
                <DocumentClockIcon size={fontSize(38)} color="#707070" />
              </View>
              <Text style={styles.groupItemContentText}>待发</Text>
            </View>
          </View>
        </View>
      </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: widthUtils(273,273).height,
  },
  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,
  },
  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(70,70).width,
    height: widthUtils(70,70).height,
    borderWidth: 0,
    borderRadius: 35,
    resizeMode: "cover",
  },
  customerInfoPanel: {
    marginLeft: 15,
  },
  uniqueHeaderTextStyle: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(20),
    fontWeight: "400",
    fontFamily: "Archivo Black, sans-serif",
    color: "white",
  },
  elegantText: {
    padding: 0,
    margin: 0,
    marginTop: 6.75,
    fontSize: 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: 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: {
    display: "flex",
    width: widthUtils(24,24).width,
    height: widthUtils(24,24).height,
    marginLeft: 11,
    color: "#ffffff",
  },
  gradientCardContainer: {
    marginTop: 10,
    backgroundColor: "#3A3128",
    borderRadius: 10,
  },
  promoCardContainer2: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    height: widthUtils(99,99).height,
    paddingTop: 8,
    paddingRight: 9.5,
    paddingBottom: 15,
    paddingLeft: 9,
  },
  productInfoContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
  },
  imageWithTextRatio: {
    width: widthUtils(23.5,56).width,
    height: widthUtils(23.5,56).height,
  },
  goldenItalicHeading: {
    padding: 0,
    paddingBottom: 2.75,
    margin: 0,
    marginLeft: 1,
    fontSize: 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: fontSize(12),
    fontWeight: "900",
    fontStyle: "italic",
    fontFamily: "Segoe UI",
    color: "#4e2000",
  },
  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,
  },
  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,
  },
});