import { Stack } from 'expo-router';
import { StyleSheet, TextInput, TouchableOpacity } from 'react-native';
import { router } from 'expo-router';
import DeviceInfo from 'react-native-device-info';

import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { useToken } from '@/context/AppProvider';
import { Colors } from '@/constants/Colors';
import React from 'react';
import { useColorScheme } from '@/hooks/useColorScheme';
import { Message } from '@/services/message';
import { Request } from '@/services/request';

export default function OnboardStartScreen() {
    const colorScheme = useColorScheme() ?? 'light';
    const { setToken } = useToken();
    const [ name, setName ] = React.useState( '' );
    const [ zipcode, setZipcode ] = React.useState( '' );
    const [ houseNumber, setHouseNumber ] = React.useState( '' );

    const start = () => {
        if (name === '' || zipcode === '' || houseNumber === '') {
            Message.error( 'Niet alle gegevens zijn ingevuld!' );

            return;
        }

        // Get device name info
        const deviceName = DeviceInfo.getModel();

        Request
            .post( 'sessions/create', {
                name: name,
                zipcode: zipcode,
                houseNumber: houseNumber,
                device: deviceName,
            } )
            .then( (response) => {
                if (!response.success) {
                    Message.error( response.message );
                } else {
                    const token = response.token;

                    setToken( token );
                    router.replace( "/(tabs)" );

                    Message.success( response.message );
                }
            } );
    }

    return (
        <>
            <Stack.Screen options={{ title: 'Welkom' }}/>
            <ThemedView style={styles.container}>
                <ThemedView style={styles.heading}>
                    <ThemedText type="title">Welkom bij </ThemedText>
                    <ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>Kliko</ThemedText>
                </ThemedView>

                <ThemedView style={styles.inputContainer}>
                    <ThemedText>Wat is je naam?</ThemedText>
                    <TextInput
                        style={styles.input}
                        onChangeText={setName}
                        placeholder={'Je naam'}
                        value={name}
                    />
                </ThemedView>

                <ThemedView style={styles.inputContainer}>
                    <ThemedText>Wat is je postcode en huisnummer?</ThemedText>
                    <TextInput
                        style={styles.input}
                        onChangeText={setZipcode}
                        placeholder={'Postcode'}
                        value={zipcode}
                    />
                    <TextInput
                        style={styles.input}
                        onChangeText={setHouseNumber}
                        placeholder={'Huisnummer'}
                        value={houseNumber}
                        keyboardType="numeric"
                    />
                </ThemedView>


                <TouchableOpacity style={{ ...styles.button, backgroundColor: Colors[ colorScheme ].tint }} onPress={start}>
                    <ThemedText style={{ color: '#fff' }}>Start</ThemedText>
                </TouchableOpacity>
            </ThemedView>
        </>
    );
}

const styles = StyleSheet.create( {
    container: {
        padding: 20,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    heading: {
        marginBottom: 30,
        alignItems: 'center',
        justifyContent: 'center',
    },
    inputContainer: {
        paddingTop: 20,
    },
    input: {
        width: 250,
        borderWidth: 1,
        padding: 10,
        paddingLeft: 20,
        borderRadius: 3,
        marginBottom: 10,
    },
    button: {
        borderRadius: 5,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 40,
        paddingRight: 40,
        marginTop: 30,
    },
} );