import { useAuth } from '@/contexts/auth-context';
import { fetchApi } from '@/lib/server-api-util';
import { useRouter } from 'expo-router';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Modal, Pressable, StyleSheet, View } from 'react-native';
import { ThemedText } from '../ThemedText';

const DeleteModal = (props: { modalVisible: boolean, setModalVisible: (visible: boolean) => void, setSettingModalVisible: (visible: boolean) => void }) => {
    const { modalVisible, setModalVisible, setSettingModalVisible } = props;
    const { logout } = useAuth();
    const { t } = useTranslation();
    const router = useRouter();
    // 注销账号
    const handleDeleteAccount = () => {
        fetchApi("/iam/delete-user", {
            method: "DELETE",
            headers: {
                "Content-Type": "application/json",
            },
        })
            .then(async (res) => {
                await logout();
                setModalVisible(false);
                setSettingModalVisible(false);
                router.replace('/login');
            })
            .catch(() => {
                console.error("jwt has expired.");
            });
    };

    return (
        <Modal
            animationType="fade"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => setModalVisible(false)}
        >
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <ThemedText style={styles.modalTitle}>
                        {t("generalSetting.delete", { ns: "personal" })}
                    </ThemedText>
                    <View style={styles.buttonContainer}>
                        <Pressable
                            style={[styles.button, styles.cancelButton]}
                            onPress={() => setModalVisible(false)}
                        >
                            <ThemedText style={styles.cancelButtonText}>
                                {t("generalSetting.cancel", { ns: "personal" })}
                            </ThemedText>
                        </Pressable>
                        <Pressable
                            style={[styles.button, styles.deleteButton]}
                            onPress={handleDeleteAccount}
                        >
                            <ThemedText style={styles.deleteButtonText}>
                                {t("generalSetting.deleteAccount", { ns: "personal" })}
                            </ThemedText>
                        </Pressable>
                    </View>
                </View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    modalView: {
        width: '80%',
        backgroundColor: 'white',
        borderRadius: 16,
        padding: 24,
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5,
        marginBottom: 20,
    },
    buttonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
        marginTop: 20,
    },
    button: {
        borderRadius: 20,
        paddingVertical: 12,
        paddingHorizontal: 20,
        elevation: 2,
        minWidth: 100,
        alignItems: 'center',
    },
    cancelButton: {
        backgroundColor: '#F5F5F5',
        marginRight: 12,
    },
    deleteButton: {
        backgroundColor: '#E2793F',
    },
    cancelButtonText: {
        color: '#4C320C',
        fontWeight: '600',
    },
    deleteButtonText: {
        color: 'white',
        fontWeight: '600',
    },
    modalTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#4C320C',
    },
    closeButton: {
        fontSize: 28,
        color: '#4C320C',
        padding: 10,
    },
    modalContent: {
        flex: 1,
    },
    modalText: {
        fontSize: 16,
        color: '#4C320C',
    },
    premium: {
        backgroundColor: "#FAF9F6",
        padding: 16,
        borderRadius: 24,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    content: {
        flex: 1,
        flexDirection: 'column',
        gap: 4,
        backgroundColor: '#FAF9F6',
        borderRadius: 24,
        paddingVertical: 8
    },
    item: {
        paddingHorizontal: 16,
        paddingVertical: 8,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    itemText: {
        fontSize: 14,
        fontWeight: '600',
        color: '#4C320C',
    },
    upgradeButton: {
        backgroundColor: '#E2793F',
        borderRadius: 20,
        paddingHorizontal: 16,
        paddingVertical: 8,
    },
    upgradeButtonText: {
        color: '#fff',
        fontSize: 14,
        fontWeight: "600"
    },
    switchContainer: {
        width: 50,
        height: 30,
        borderRadius: 15,
        justifyContent: 'center',
        paddingHorizontal: 2,
    },
    switchOn: {
        backgroundColor: '#E2793F',
        alignItems: 'flex-end',
    },
    switchOff: {
        backgroundColor: '#E5E5E5',
        alignItems: 'flex-start',
    },
    switchCircle: {
        width: 26,
        height: 26,
        borderRadius: 13,
    },
    switchCircleOn: {
        backgroundColor: 'white',
    },
    switchCircleOff: {
        backgroundColor: '#A5A5A5',
    },
});
export default DeleteModal;