154 lines
4.1 KiB
TypeScript
154 lines
4.1 KiB
TypeScript
import { useRouter } from "expo-router";
|
|
import { useEffect, useState } from "react";
|
|
import { ScrollView, 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 { ThemeToggle } from "@/components/theme-toggle";
|
|
import { ThemedText } from "@/components/themed-text";
|
|
import { ThemedView } from "@/components/themed-view";
|
|
import { DOMAIN, TOKEN } from "@/constants";
|
|
import { useAppTheme } from "@/hooks/use-app-theme";
|
|
import { useI18n } from "@/hooks/use-i18n";
|
|
import { removeStorageItem } from "@/utils/storage";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
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 { colors } = useAppTheme();
|
|
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 (
|
|
<SafeAreaView style={styles.safeArea} edges={["top", "left", "right"]}>
|
|
<ThemedView style={styles.container}>
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={styles.scrollContent}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<ThemedText type="title" style={styles.title}>
|
|
{t("navigation.setting")}
|
|
</ThemedText>
|
|
|
|
{/* Theme Toggle Section */}
|
|
<ThemeToggle style={styles.themeSection} />
|
|
|
|
{/* Language Section */}
|
|
<View
|
|
style={[
|
|
styles.settingItem,
|
|
{
|
|
backgroundColor: colors.surface,
|
|
borderColor: colors.border,
|
|
},
|
|
]}
|
|
>
|
|
<ThemedText type="default">{t("common.language")}</ThemedText>
|
|
<RotateSwitch
|
|
initialValue={isEnabled}
|
|
onChange={toggleSwitch}
|
|
size="sm"
|
|
offImage={EnIcon}
|
|
onImage={VnIcon}
|
|
/>
|
|
</View>
|
|
|
|
{/* Logout Button */}
|
|
<ThemedView
|
|
style={[styles.button, { backgroundColor: colors.primary }]}
|
|
onTouchEnd={async () => {
|
|
await removeStorageItem(TOKEN);
|
|
await removeStorageItem(DOMAIN);
|
|
router.navigate("/auth/login");
|
|
}}
|
|
>
|
|
<ThemedText type="defaultSemiBold" style={styles.buttonText}>
|
|
{t("auth.logout")}
|
|
</ThemedText>
|
|
</ThemedView>
|
|
|
|
{data && (
|
|
<ThemedView
|
|
style={[styles.debugSection, { backgroundColor: colors.surface }]}
|
|
>
|
|
<ThemedText type="default">{data.title}</ThemedText>
|
|
<ThemedText type="default">{data.completed}</ThemedText>
|
|
<ThemedText type="default">{data.id}</ThemedText>
|
|
</ThemedView>
|
|
)}
|
|
</ScrollView>
|
|
</ThemedView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeArea: {
|
|
flex: 1,
|
|
paddingBottom: 5,
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
padding: 20,
|
|
gap: 16,
|
|
},
|
|
title: {
|
|
textAlign: "center",
|
|
marginBottom: 20,
|
|
},
|
|
themeSection: {
|
|
marginBottom: 8,
|
|
},
|
|
settingItem: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 16,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
},
|
|
button: {
|
|
marginTop: 20,
|
|
paddingVertical: 14,
|
|
paddingHorizontal: 20,
|
|
borderRadius: 12,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
buttonText: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
},
|
|
debugSection: {
|
|
marginTop: 20,
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
gap: 8,
|
|
},
|
|
});
|