import React from 'react';
import { Stack } from 'expo-router';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { router } from 'expo-router';
import DeviceInfo from 'react-native-device-info';
import { useTranslation } from 'react-i18next';
import Ionicons from '@expo/vector-icons/Ionicons';

import { ThemedText } from '@/lib/components/ThemedText';
import { ThemedView } from '@/lib/components/ThemedView';
import { useToken } from '@/lib/context/AppProvider';
import { Colors } from '@/lib/constants/Colors';
import { useColorScheme } from '@/lib/hooks/useColorScheme';
import { Message } from '@/lib/services/message';
import { Request } from '@/lib/services/request';
import { store } from '@/lib/store/store';
import { setSession } from '@/lib/store/dataStore';
import ThemedInput from '@/lib/components/ThemedInput';

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

    const start = () => {
        if (name === '' || zipcode === '' || houseNumber === '') {
            Message.error( t( "onboarding.missing-info" ) );

            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)" );

                    store.dispatch( setSession( response.session ) );

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

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

                <ThemedView style={styles.inputContainer}>
                    <ThemedInput
                        label={t( "onboarding.your-name" )}
                        placeholder={t( "onboarding.name" )}
                        onChangeText={setName}
                        value={name}
                        style={{paddingTop: 20}}
                    />

                    <ThemedInput
                        label={t( "onboarding.your-address" )}
                        placeholder={t( "onboarding.zipcode" )}
                        onChangeText={setZipcode}
                        value={zipcode}
                        style={{paddingTop: 20}}
                    />

                    <ThemedInput
                        placeholder={t( "onboarding.house-number" )}
                        onChangeText={setHouseNumber}
                        value={houseNumber}
                        keyboardType="numeric"
                    />
                </ThemedView>

                <TouchableOpacity style={{ ...styles.button, backgroundColor: Colors[ colorScheme ].tint }} onPress={start}>
                    <ThemedText style={{ color: Colors.white }}>
                        {t( "onboarding.start" )}
                    </ThemedText>
                    <Ionicons name={"arrow-forward"} size={18} style={styles.buttonIcon}/>
                </TouchableOpacity>
            </ThemedView>
        </>
    );
}

const styles = StyleSheet.create( {
    container: {
        padding: 20,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    heading: {
        marginBottom: 30,
        alignItems: 'center',
        justifyContent: 'center',
    },
    inputContainer: {
        width: 250,
    },
    button: {
        borderRadius: 5,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 40,
        paddingRight: 40,
        marginTop: 30,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
    },
    buttonIcon: {
        marginLeft: 15,
        paddingTop: 2,
        color: Colors.white
    }
} );