import {Text, View} from "../../../components/Themed";
import {StyleSheet} from "react-native";
import Colors from "../../../constants/Colors";
import { ChevronDownIcon, HStack, Icon, Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectIcon, SelectInput, SelectItem, SelectPortal, SelectTrigger, Switch, VStack } from "@gluestack-ui/themed";
import { useEffect, useState } from "react";
import global from "../../../constants/global";
import { useSettings, AppSettings } from "../../../components/appSettingsContext";

export default function SettingsScreen() {
    const settings = useSettings().settings;
    const updateSettings = useSettings().setSettings;

    let options:AppSettings = {
        showEmail: settings.showEmail,
        theme:settings.theme,
        outOfBounds: settings.outOfBounds,
        showOP: settings.showOP
    }

    return (
        <View style={styles.container}>
            <View style={styles.content}>
                {/* Show email with statistics */}
                <Text style={styles.title}>Appearance</Text>
                <VStack style={styles.card}>
                    
                    <HStack style={styles.setting}>
                        <Text style={styles.optionText}>Theme</Text>
                        
                        <Select style={styles.selection}>
                            <SelectTrigger borderColor={Colors.dark.redBright}>
                                <SelectInput color={Colors.dark.text} placeholder="Dark"/>
                                {/* @ts-ignore */}
                                <SelectIcon mr='$3'>
                                    <Icon as={ChevronDownIcon} />
                                </SelectIcon>
                            </SelectTrigger>
                            <SelectPortal>
                                <SelectBackdrop/>
                                <SelectContent backgroundColor={Colors.dark.tabBg}>
                                    <SelectDragIndicatorWrapper>
                                        <SelectDragIndicator/>
                                    </SelectDragIndicatorWrapper>

                                    <SelectItem textStyle={styles.optionText} label="System" value='system' isDisabled={true} />
                                    <SelectItem textStyle={styles.optionText} label="Light" value='light' isDisabled={true} />
                                    <SelectItem $checked-backgroundColor={Colors.dark.background} textStyle={styles.optionText} label="Dark" value='dark' />
                                    
                                </SelectContent>
                            </SelectPortal>
                        </Select>
                    </HStack>

                    <HStack style={styles.setting}>
                        <Text style={styles.optionText}>Show email in stats</Text>
                        <Switch 
                            size="md"
                            defaultValue={settings.showEmail}
                            sx={{
                                props:{
                                    trackColor:{
                                        true:Colors.dark.redBright,
                                        false:Colors.dark.text
                                    }
                                }
                            }}
                            onValueChange={(value)=>{
                                options.showEmail = value
                                updateSettings(options)
                            }}
                        />
                    </HStack>

                    <HStack style={styles.setting}>
                        <Text style={styles.optionText}>Show 'OP' & 'Yours' post badges</Text>
                        <Switch 
                            size="md"
                            defaultValue={settings.showOP}
                            sx={{
                                props:{
                                    trackColor:{
                                        true:Colors.dark.redBright,
                                        false:Colors.dark.text
                                    }
                                }
                            }}
                            onValueChange={(value)=>{
                                options.showOP = value
                                updateSettings(options)
                            }}
                        />
                    </HStack>

                </VStack>
                
                <Text style={styles.title}>Pop-ups</Text>
                <VStack style={styles.card}>
                <HStack style={styles.setting}>
                        <Text style={styles.optionText}>Show out of bounds message</Text>
                        <Switch 
                            size="md"
                            defaultValue={settings.outOfBounds}
                            sx={{
                                props:{
                                    trackColor:{
                                        true:Colors.dark.redBright,
                                        false:Colors.dark.text
                                    }
                                }
                            }}
                            onValueChange={(value)=>{
                                options.outOfBounds = value
                                updateSettings(options)
                            }}
                        />
                    </HStack>
                </VStack>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    content:{
        flex:1,
        alignItems:'center',
        justifyContent:'flex-start',
        backgroundColor:Colors.dark.tabBg,
    },
    card:{
        borderRadius: 10,
        backgroundColor: Colors.dark.background,
        padding:10,
        width: global.width*0.95,
        marginBottom: 15,
        rowGap:10,
    },
    title:{
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 5,
        color: Colors.dark.cyan,
        alignSelf:'flex-start',
        marginLeft:global.width*0.05-5
    },
    setting:{
        width:'100%',
        flexDirection:'row',
        justifyContent:'space-between'
    },
    optionText:{
        fontSize:18,
        textAlignVertical:'center',
        color:Colors.dark.text
    },
    optionToggle:{
        color:Colors.dark.cyan
    },
    selection:{
        width:global.width*0.4
    }
})