import { View, Text, ScrollView } from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { get, save } from "../../utils/storeInfo";
import baseRequest from "../../utils/baseRequest";
import Toast from "react-native-toast-message";
import { Image } from "expo-image";
import { useHeaderHeight } from "@react-navigation/elements";
import Empty from "../../components/Empty";
import { generateSignature } from "../../utils/crypto";

export default function UserProfile({ navigation, route }) {
  const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";

  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  const headerHeight = useHeaderHeight();

  //获取当前页面数据
  const [data, setData] = useState();
  useEffect(() => {
    const getData = async () => {
      //获取环境变量
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;

      const account = await get("account");
      const base = await baseRequest();
      const signature = await generateSignature({
        ...base,
        mid: account.mid,
      });
      try {
        //获取账号基本信息
        const accountResponse = await fetch(
          `${apiUrl}/api/account/list_by_mid?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ...base,
              mid: account.mid,
            }),
          }
        );
        const accountData = await accountResponse.json();
        if (accountData.ret === -1) {
          Toast.show({
            type: "error",
            text1: accountData.msg,
            topOffset: 60,
          });
          return;
        }
        await save("account", accountData.data.account);
        setData(accountData.data.account);
      } catch (error) {
        console.error(error);
      }
    };
    getData();
  }, []);
  return (
    <View
      style={{
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <ScrollView style={{ ...tailwind(""), paddingTop: headerHeight }}>
        <View style={tailwind("flex flex-col items-center")}>
          <Image
            style={tailwind("w-[4.6rem] h-[4.6rem] rounded-full")}
            source={data?.avatar?.images[0]?.urls[0]}
            placeholder={blurhash}
            contentFit="cover"
            transition={1000}
            cachePolicy="disk"
          />
          <View style={tailwind("flex flex-col ml-2 h-20 items-center")}>
            <Text
              style={tailwind("text-2xl font-medium text-white mb-1.5")}
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              {data?.name}
            </Text>
            <View
              style={{
                backgroundColor: "#FFFFFF1A",
                ...tailwind("rounded-full px-2"),
              }}
            >
              <Text style={tailwind("text-xs text-white")}>
                <Text style={tailwind("font-medium")}>ID </Text>
                {data?.user_id}
              </Text>
            </View>
          </View>
        </View>
        <Empty type="nodata" />
      </ScrollView>
    </View>
  );
}