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

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';
import { router } from 'expo-router';

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

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

      return;
    }

    // TODO: Get device name
    const deviceName = 'Test';

    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,
  },
});