import { useRouter } from "expo-router";
import { StyleSheet } from "react-native";

import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { api } from "@/config";
import { DOMAIN, TOKEN } from "@/constants";
import { removeStorageItem } from "@/utils/storage";
import { useState } from "react";

type Todo = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};

export default function SettingScreen() {
  const router = useRouter();
  const [data, setData] = useState<Todo | null>(null);

  // useEffect(() => {
  //   getData();
  // }, []);

  const getData = async () => {
    try {
      const response = await api.get("/todos/1");
      setData(response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  return (
    <ThemedView style={styles.container}>
      <ThemedText type="title">Settings</ThemedText>
      <ThemedView
        style={styles.button}
        onTouchEnd={async () => {
          await removeStorageItem(TOKEN);
          await removeStorageItem(DOMAIN);
          router.navigate("/auth/login");
        }}
      >
        <ThemedText type="defaultSemiBold">Đăng xuất</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,
  },
  button: {
    marginTop: 20,
    padding: 10,
    backgroundColor: "#007AFF",
    borderRadius: 5,
  },
});