import { useRouter } from "expo-router";
import { useEffect, useState } from "react";
import { StyleSheet, View } from "react-native";

import EnIcon from "@/assets/icons/en_icon.png";
import VnIcon from "@/assets/icons/vi_icon.png";
import RotateSwitch from "@/components/rotate-switch";
import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { DOMAIN, TOKEN } from "@/constants";
import { useI18n } from "@/hooks/use-i18n";
import { removeStorageItem } from "@/utils/storage";
type Todo = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};

export default function SettingScreen() {
  const router = useRouter();
  const [data, setData] = useState<Todo | null>(null);
  const { t, locale, setLocale } = useI18n();
  const [isEnabled, setIsEnabled] = useState(locale === "vi");
  // Sync isEnabled state khi locale thay đổi
  useEffect(() => {
    setIsEnabled(locale === "vi");
  }, [locale]);

  const toggleSwitch = async () => {
    const newLocale = isEnabled ? "en" : "vi";
    await setLocale(newLocale);
  };

  return (
    <ThemedView style={styles.container}>
      <ThemedText type="title">{t("navigation.setting")}</ThemedText>

      <View style={styles.settingItem}>
        <ThemedText type="default">{t("common.language")}</ThemedText>
        {/* <Switch
          trackColor={{ false: "#767577", true: "#81b0ff" }}
          thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
          ios_backgroundColor="#3e3e3e"
          onValueChange={toggleSwitch}
          value={isEnabled}
        /> */}
        <RotateSwitch
          initialValue={isEnabled}
          onChange={toggleSwitch}
          size="sm"
          offImage={EnIcon}
          onImage={VnIcon}
        />
      </View>

      <ThemedView
        style={styles.button}
        onTouchEnd={async () => {
          await removeStorageItem(TOKEN);
          await removeStorageItem(DOMAIN);
          router.navigate("/auth/login");
        }}
      >
        <ThemedText type="defaultSemiBold">{t("auth.logout")}</ThemedText>
      </ThemedView>

      {data && (
        <ThemedView style={{ marginTop: 20 }}>
          <ThemedText type="default">{data.title}</ThemedText>
          <ThemedText type="default">{data.completed}</ThemedText>
          <ThemedText type="default">{data.id}</ThemedText>
        </ThemedView>
      )}
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
    gap: 16,
  },
  settingItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    width: "100%",
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
    backgroundColor: "rgba(0, 122, 255, 0.1)",
  },
  button: {
    marginTop: 20,
    paddingVertical: 12,
    paddingHorizontal: 20,
    backgroundColor: "#007AFF",
    borderRadius: 8,
  },
});