import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import BackIcon from "../../components/BackIcon";
import fontSize from "../../utils/fontsizeUtils";
import LeftArrowIcon from "../../components/DownArrowIcon";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { useState, useEffect } from "react";
import { settingApi, MySetting } from "../../services/api/setting";
import { RootStackParamList } from "../../navigation/types";
import { eventBus } from "../../utils/eventBus";
export const SettingList = () => {

  const [mySetting, setMySetting] = useState<MySetting>();
  const getMySetting = async () => {
    const res = await settingApi.getMySetting()
    console.log(res);
    setMySetting(res);
  }

  useEffect(() => {
    getMySetting();
    const refreshSetting = () => {
      getMySetting();
    }
    eventBus.on("refreshSetting", refreshSetting);
    return () => {
      eventBus.off("refreshSetting", refreshSetting);
    };
  }, []);

  const navigation =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => navigation.goBack()}
        style={styles.header}
      >
        <BackIcon size={fontSize(24)} />
      </TouchableOpacity>
      <View style={styles.content}>
        <View style={styles.item}>
          <Text>我的个人资料</Text>
          <Text>
            <LeftArrowIcon size={fontSize(20)} color="#acacac" />
          </Text>
        </View>
        <View style={styles.item}>
          <Text>修改密码</Text>
          <Text>
            <LeftArrowIcon size={fontSize(20)} color="#acacac" />
          </Text>
        </View>
        <View style={styles.item}>
          <Text>更换电话号码</Text>
          <Text>
            <LeftArrowIcon size={fontSize(20)} color="#acacac" />
          </Text>
        </View>
      </View>

      <View style={styles.content}>
      <TouchableOpacity
            onPress={() => {
                if (mySetting?.language && mySetting?.currency) {
                    navigation.navigate("MyAddress");
                }
            }}
            style={styles.item}
          >
            <Text>我的地址</Text>
            <Text>
              <LeftArrowIcon size={fontSize(20)} color="#acacac" />
            </Text>
          </TouchableOpacity>
        <View style={styles.item}>
          <Text>反馈</Text>
          <Text>
            <LeftArrowIcon size={fontSize(20)} color="#acacac" />
          </Text>
        </View>
        <View style={styles.item}>
          <Text>Brainnel隐私政策</Text>
          <Text>
            <LeftArrowIcon size={fontSize(20)} color="#acacac" />
          </Text>
        </View>
        <View style={styles.item}>
          <Text>使用条款</Text>
          <Text>
            <LeftArrowIcon size={fontSize(20)} color="#acacac" />
          </Text>
        </View>

        <View>
          <TouchableOpacity
            onPress={() => {
                if (mySetting?.language && mySetting?.currency) {
                    navigation.navigate("CountrySetting", { mySetting });
                }
            }}
            style={styles.item}
          >
            <Text>选择语言和货币</Text>
            <Text>
              <LeftArrowIcon size={fontSize(20)} color="#acacac" />
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f8f8f8",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    padding: 20,
  },
  content: {
    backgroundColor: "#fff",
    borderBottomWidth: 10,
    borderBottomColor: "#f8f8f8",
  },
  item: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#e0e0e0",
  },
});