import {useState} from 'react';
import {Constants} from '../../utils';
import {Button, TextInput} from 'react-native-paper';
import {View} from 'react-native';

export default function InitScanner({setScannerSession}) {
  const [viewMode, setViewMode] = useState(1);
  const [scannerName, setScannerName] = useState('');

  const onQrCodeRead = async () => {
    console.log('read qr code');

    setViewMode(1);

    /*fetch(`${Constants.API_ADDRESS}/scanner`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          scannerName: 'testaaaa',
        }),
      })
        .then(res => {
          if (res.status === 200) {
            return res.json();
          }
  
          return Promise.reject(res.status);
        })
        .then(data => {
          console.log('next');
        })
        .catch(err => {
          console.error(err);
        });*/
  };

  const onAddScanner = () => {
    console.log(scannerName);
  };

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2c3e50',
      }}>
      {viewMode === 0 ? (
        <QRCodeScanner
          topContent={<Text>Scan QR-Code on Dashboard</Text>}
          onRead={() => onQrCodeRead()}
        />
      ) : (
        <>
          <TextInput
            style={{
              backgroundColor: '#fff',
              color: '#000',
              width: '80%',
              borderRadius: 5,
              marginBottom: 10,
            }}
            maxLength={Constants.GLOBALS.MAX_SCANNER_LENGTH}
            label="Scanner name"
            value={scannerName}
            onChangeText={value => setScannerName(value.nativeEvent.text)}
          />
          <Button type="primary" onPress={() => onAddScanner()}>
            Add scanner
          </Button>
        </>
      )}
    </View>
  );
}