import React, {useState} from 'react';
import {
  SafeAreaView,
  Text,
  useColorScheme,
  Vibration,
  View,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

import QRCodeScanner from 'react-native-qrcode-scanner';
import {Button} from '@ant-design/react-native';

function App(): JSX.Element {
  const colors = {
    nothingScanned: '#95a5a6', // gray
    input: '#9b59b6', // purple
    foundArticle: '#2ecc71', // green
    wrongArticle: '#c0392b', // red
  };

  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const [inputCode, setInputCode] = useState('');
  const [scannedCode, setScannedCode] = useState('');
  const [markerStyleBorderColor, setMarkerStyleBorderColor] =
    useState('#95a5a6');

  return (
    <SafeAreaView style={backgroundStyle}>
      <View style={{height: '100%', width: '100%'}}>
        <QRCodeScanner
          showMarker={true}
          onRead={data => {
            if (inputCode == '') {
              setInputCode(c => (c = data.data));
              setMarkerStyleBorderColor(colors.input);

              Vibration.vibrate(500);

              setTimeout(
                () => setMarkerStyleBorderColor(colors.nothingScanned),
                500,
              );
            } else {
              setScannedCode(c => (c = data.data));

              if (data.data == inputCode) {
                setMarkerStyleBorderColor(m => (m = colors.foundArticle));

                Vibration.vibrate(100);

                setTimeout(
                  () => setMarkerStyleBorderColor(colors.nothingScanned),
                  500,
                );
              } else {
                setMarkerStyleBorderColor(m => (m = colors.wrongArticle));

                Vibration.vibrate(300);

                setTimeout(
                  () => setMarkerStyleBorderColor(colors.nothingScanned),
                  500,
                );
              }
            }
          }}
          reactivate={true}
          reactivateTimeout={500}
          vibrate={false}
          cameraStyle={{overflow: 'hidden'}}
          markerStyle={{borderColor: markerStyleBorderColor, borderWidth: 5}}
          topViewStyle={{
            alignItems: 'flex-start',
            justifyContent: 'flex-start',
            paddingLeft: 20,
            paddingTop: 20,
            paddingBottom: 20,
            flex: 1,
          }}
          topContent={
            <View>
              <Text style={{fontSize: 16, fontWeight: 'bold'}}>
                Desired article
              </Text>
              <Text
                style={{fontSize: 18, color: '#9b59b6', fontWeight: 'bold'}}>
                {inputCode}
              </Text>
              <Text style={{fontSize: 16, fontWeight: 'bold'}}>
                Scanned article
              </Text>
              <Text
                style={{
                  fontSize: 18,
                  color: '#d35400',
                  fontWeight: 'bold',
                }}>
                {scannedCode}
              </Text>
            </View>
          }
          bottomContent={
            <View>
              <Button
                disabled={inputCode == '' ? true : false}
                type="primary"
                onPress={() => {
                  setInputCode(c => (c = ''));
                  setScannedCode(c => (c = ''));
                  setMarkerStyleBorderColor(s => (s = colors.nothingScanned));
                }}
                style={{width: 220}}>
                Next Article
              </Button>
            </View>
          }
        />
      </View>
    </SafeAreaView>
  );
}

export default App;