import {View, Text} from "../../../components/Themed";
import {StyleSheet} from "react-native";
import Colors from "../../../constants/Colors";
import { useLocalSearchParams, useNavigation } from "expo-router";
import WebView from "react-native-webview";
import { useEffect, useState } from "react";

export default function LegalScreen() {
    const navigation = useNavigation()
    const local = useLocalSearchParams()
    const [error, setError] = useState(false)

    useEffect(()=>{
        const unsubscribe = navigation.addListener('focus', ()=>{
            setError(false)
        })

        return unsubscribe
    },[navigation])

    if(local.type=="terms"){
        return(
            <View style={styles.container}>
                {!error&&<WebView
                    style={styles.content}
                    source={{uri:'https://server.sherlock.noahvanfleet.com/tos'}}
                    onError={()=>{
                        setError(true)
                    }}
                />}

                {error&&<View style={styles.content}>
                    <Text style={styles.title}>Hmmm...{'\n'}Something went wrong.</Text>    
                </View>}
            </View>
        )
    }else if(local.type=="privacy"){
        return(
            <View style={styles.container}>
                {!error&&<WebView
                    style={styles.content}
                    source={{uri:'https://server.sherlock.noahvanfleet.com/privacy'}}
                    onError={()=>{
                        setError(true)
                    }}
                />}

                {error&&<View style={styles.content}>
                    <Text style={styles.title}>Hmmm...{'\n'}Something went wrong.</Text>    
                </View>}
            </View>
        )
    }else{
        return(
            <View style={styles.container}>
                {!error&&<WebView
                    style={styles.content}
                    source={{uri:'https://server.sherlock.noahvanfleet.com/tos'}}
                    onError={()=>{
                        setError(true)
                    }}
                />}

                {error&&<View style={styles.content}>
                    <Text style={styles.title}>I have no clue how you got here.</Text>    
                </View>}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.dark.tabBg,
    },
    content: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 65
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        color: Colors.dark.redBright,
    }
})