import { View, Text, StyleSheet, TouchableOpacity, SafeAreaView, StatusBar, Platform } 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";
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useTranslation } from "react-i18next";

export const SettingList = () => {
  const { t } = useTranslation();
  const [mySetting, setMySetting] = useState<MySetting>();
  const getMySetting = async () => {
    const res = await settingApi.getMySetting()
    console.log("MySetting:");
    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 (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <View style={styles.safeAreaContent}>
        <View style={styles.header}>
          <TouchableOpacity
            onPress={() => navigation.goBack()}
          >
            <BackIcon size={fontSize(24)} />
          </TouchableOpacity>
          <Text style={styles.headerTitle}>{t("settings.title")}</Text>
          <View style={styles.placeholder} />
        </View>
        
        <View style={styles.content}>
          <View style={styles.item}>
            <Text>{t("settings.profile")}</Text>
            <Text>
              <LeftArrowIcon size={fontSize(20)} color="#acacac" />
            </Text>
          </View>
          <View style={styles.item}>
            <Text>{t("settings.change_password")}</Text>
            <Text>
              <LeftArrowIcon size={fontSize(20)} color="#acacac" />
            </Text>
          </View>
          <View style={styles.item}>
            <Text>{t("settings.change_phone")}</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>{t("settings.my_address")}</Text>
              <Text>
                <LeftArrowIcon size={fontSize(20)} color="#acacac" />
              </Text>
            </TouchableOpacity>
          <View style={styles.item}>
            <Text>{t("settings.feedback")}</Text>
            <Text>
              <LeftArrowIcon size={fontSize(20)} color="#acacac" />
            </Text>
          </View>
          <View style={styles.item}>
            <Text>{t("settings.privacy_policy")}</Text>
            <Text>
              <LeftArrowIcon size={fontSize(20)} color="#acacac" />
            </Text>
          </View>
          <View style={styles.item}>
            <Text>{t("settings.terms_of_use")}</Text>
            <Text>
              <LeftArrowIcon size={fontSize(20)} color="#acacac" />
            </Text>
          </View>

          <TouchableOpacity style={styles.item} onPress={() => {
            AsyncStorage.clear();
            navigation.navigate("CountrySelect");
          }}>
            <Text>{t("settings.clear_cache")}</Text>
            <Text>
              <LeftArrowIcon size={fontSize(20)} color="#acacac" />
            </Text>
          </TouchableOpacity>

          <View>
            <TouchableOpacity
              onPress={() => {
                  // if (mySetting?.language && mySetting?.currency) {
                      navigation.navigate("CountrySetting", { mySetting });
                  // }
              }}
              style={styles.item}
            >
              <Text>{t("settings.language_currency")}</Text>
              <Text>
                <LeftArrowIcon size={fontSize(20)} color="#acacac" />
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff',
  },
  safeAreaContent: {
    flex: 1,
    paddingTop: 0,
    backgroundColor: "#f8f8f8",
  },
  container: {
    flex: 1,
    backgroundColor: "#f8f8f8",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    padding: 20,
    backgroundColor: "#fff",
  },
  headerTitle: {
    fontSize: fontSize(18),
    fontWeight: "600",
  },
  placeholder: {
    width: 24,
  },
  content: {
    backgroundColor: "#fff",
    borderBottomWidth: 10,
    borderBottomColor: "#f8f8f8",
  },
  item: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#e0e0e0",
  },
});