/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
/* eslint-disable prettier/prettier */
import React from 'react';
import {
  ImageBackground,
  Text,
  View,
  StatusBar,
  TouchableHighlight,
  Button,
  Image,
  Alert,
  Modal,
  TouchableOpacity,
  Dimensions,
  BackHandler,
} from 'react-native';
import {Stopwatch} from 'react-native-stopwatch-timer';
import Orientation from 'react-native-orientation';
import * as RNFS from 'react-native-fs';
import Notes from './data';
import styles from '../style/style';
//import OtherClass from './saveRecords';
import Sound from 'react-native-sound';
import moment from 'moment';
import AsyncStorage from '@react-native-async-storage/async-storage';
const date = moment().utcOffset('+08:00').format('D MMM');
const time = moment().utcOffset('+08:00').format('h:mm a');
const day = moment().utcOffset('+08:00').format('ddd');

//const path = RNFS.DocumentDirectoryPath + '/settings.txt';
const path1 = RNFS.DocumentDirectoryPath + '/counter.txt';
const NOTESWHITE = [
  {name: 'C1', url: require('../sound/c.mp3')},
  {name: 'D1', url: require('../sound/d.mp3')},
  {name: 'E1', url: require('../sound/e.mp3')},
  {name: 'F1', url: require('../sound/f.mp3')},
  {name: 'G1', url: require('../sound/g.mp3')},
  {name: 'A1', url: require('../sound/a.mp3')},
  {name: 'B1', url: require('../sound/b.mp3')},
  {name: 'C2', url: require('../sound/cc.mp3')},
  {name: 'D2', url: require('../sound/dd.mp3')},
  {name: 'E2', url: require('../sound/ee.mp3')},
  {name: 'F2', url: require('../sound/ff.mp3')},
  {name: 'G2', url: require('../sound/gg.mp3')},
  {name: 'A2', url: require('../sound/aa.mp3')},
  {name: 'B2', url: require('../sound/bb.mp3')},
];
const NOTESCC = [{name: 'C#1', url: require('../sound/c_c.mp3')}];
const NOTESDD = [{name: 'D#1', url: require('../sound/d_d.mp3')}];
const NOTESFF = [{name: 'F#1', url: require('../sound/f_f.mp3')}];
const NOTESGG = [{name: 'G#1', url: require('../sound/g_g.mp3')}];
const NOTESAA = [{name: 'A#1', url: require('../sound/a_a.mp3')}];
const NOTESCC1 = [{name: 'C#2', url: require('../sound/c_cc.mp3')}];
const NOTESDD1 = [{name: 'D#2', url: require('../sound/d_dd.mp3')}];
const NOTESFF1 = [{name: 'F#2', url: require('../sound/f_ff.mp3')}];
const NOTESGG1 = [{name: 'G#2', url: require('../sound/g_gg.mp3')}];
const NOTESAA1 = [{name: 'A#2', url: require('../sound/a_aa.mp3')}];
const keywordsList = [];
const exitApp = () => BackHandler.exitApp();

var imageN = '';
var indexN = 0;
var stime = 0;
//var records = [];


class Quiz extends React.Component {
    constructor(props) {
    super(props);
    Sound.setCategory('Playback'); // true = mixWithOthers
    this.state = {
      logbook: [],
      index:0,
      correct: 0,
      wrong: 0,
      keywordsList: '',
      count: 1,
      name : '',
      start : true,
      showC : false,
      showW : false,
      showDone : false,
      showQuit : false,
      maxCount : 5,
      records: [],
    };
  }

    toggleKeyword = (keyword) => {
      var sound = new Sound(keyword.url, (error) => {
      if (error) {
        console.log('failed to load the sound', error);
        return;
      }
      // loaded successfully
      sound.play((success) => {
        if (success) {
         // console.log('successfully finished playing');
        } else {
         // console.log('playback failed due to audio decoding errors');
          sound.release();
        }
      });
    });

    let list = keywordsList;
    let index = -1;
    if ((index = keywordsList.indexOf(keyword.name)) !== -1) {
      list.splice(index, 1);
     // console.log(list);
    } else {
      list.push(keyword.name);
     // console.log(list);
    }
    this.setState({keywordsList: list});
  };

   onSubmit = () => {
    if (this.state.name.includes('C Major') || this.state.name.includes('Bass Clef C Major')) {
      this.ansCMajor();
    }
      else if (this.state.name.includes('D Major') || this.state.name.includes('Bass Clef D Major')) {
      this.ansDMajor();
    }
    else if (this.state.name.includes('E Major') || this.state.name.includes('Bass Clef E Major')) {
      this.ansEMajor();
    }
    else if (this.state.name.includes('F Sharp Major') || this.state.name.includes('Bass Clef F Sharp Major')) {
      this.ansFsMajor();
    }
    else if (this.state.name.includes('F Major') || this.state.name.includes('Bass Clef F Major')) {
      this.ansFMajor();
    }
    else if (this.state.name.includes('D Flat Major') || this.state.name.includes('Bass Clef D Flat Major')) {
      this.ansDbMajor();
    }
    else if (this.state.name.includes('E Flat Major') || this.state.name.includes('Bass Clef E Flat Major')) {
      this.ansEbMajor();
    }
    else if (this.state.name.includes('G Major') || this.state.name.includes('Bass Clef G Major')) {
      this.ansGMajor();
    }
    else if (this.state.name.includes('A Major') || this.state.name.includes('Bass Clef A Major')) {
      this.ansAMajor();
    }
    else if (this.state.name.includes('B Major') || this.state.name.includes('Bass Clef B Major')) {
      this.ansBMajor();
    }
    else if (this.state.name.includes('C Sharp Major') || this.state.name.includes('Bass Clef C  Sharp Major')) {
      this.ansCsMajor();
    }
    else if (this.state.name.includes('B Flat Major') || this.state.name.includes('Bass Clef B Flat Major')) {
      this.ansBbMajor();
    }
    else if (this.state.name.includes('A Flat Major') || this.state.name.includes('Bass Clef A Flat Major')) {
      this.ansAbMajor();
    }
    else if (this.state.name.includes('G Flat Major') || this.state.name.includes('Bass Clef G Flat Major')) {
      this.ansGbMajor();
    }
    else {
      console.log('error');
      console.log(this.state.name);
    }
  };

  ansCMajor = ()=> {
    if (keywordsList.toString() === 'C1,D1,E1,F1,G1,A1,B1,C2'){
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

    ansDMajor = () => {
     if (keywordsList.toString() === 'D1,E1,F#1,G1,A1,B1,C#2,D2') {
     if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  ansEMajor = () => {
    if (keywordsList.toString() === 'E1,F#1,G#1,A1,B1,C#2,D#2,E2') {
       if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  ansFsMajor = () => {
      if (keywordsList.toString() === 'F#1,G#1,A#1,B1,C#2,D#2,F2,F#2') {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

    ansFMajor = () => {
       if (keywordsList.toString() === 'F1,G1,A1,A#1,C2,D2,E2,F2') {
       if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  ansEbMajor = () => {
       if (keywordsList.toString() === 'D#1,F1,G1,G#1,A#1,C2,D2,D#2') {
       if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

   ansDbMajor = () => {
      if (keywordsList.toString() === 'C#1,D#1,F1,F#1,G#1,A#1,C2,C#2') {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
        console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  ansGMajor = () => {
      if (keywordsList.toString() === 'G1,A1,B1,C2,D2,E2,F#2,G2') {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  ansAMajor = () => {
       if (keywordsList.toString() === 'A1,B1,C#2,D2,E2,F#2,G#2,A2') {
       if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  ansBMajor = () => {
      if (keywordsList.toString() === 'B1,C#2,D#2,E2,F#2,G#2,A#2,B2') {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  ansCsMajor = () => {
       if (keywordsList.toString() === 'C#1,D#1,F1,F#1,G#1,A#1,C2,C#2') {
       if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  ansBbMajor = () => {
      if (keywordsList.toString() === 'A#1,C2,D2,D#2,F2,G2,A2,A#2') {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  ansAbMajor = () => {
       if (keywordsList.toString() === 'G#1,A#1,C2,C#2,D#2,F2,G2,G#2') {
       if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  ansGbMajor = () => {
      if (keywordsList.toString() === 'F#1,G#1,A#1,B1,C#2,D#2,F2,F#2') {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
        this.handlerArgCall((this.state.correct + 1), this.state.wrong, stime);
       // console.log('finish');
        this.backAction();
      }
      else {
        keywordsList.splice(0, keywordsList.length);
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.displayData();
    }
    } else {
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
        this.handlerArgCall(this.state.correct, (this.state.wrong + 1), stime);
        //console.log('finish');
        this.backAction();
      }
      else {
        this.setState({showW: true});
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
        this.displayData();
    }
    }
  };

  homeExit = async () => {
    // this.props.navigation.navigate('1');
      Alert.alert('Hold on!', 'Are you sure you want to quit?', [
      {
        text: 'Cancel',
        onPress: () => null,
        style: 'cancel',
      },
      { text: 'YES', onPress: () => [ this.props.navigation.navigate('1'), Orientation.lockToPortrait()]},
    ]);

  };

   backAction = () => {
    this.props.navigation.navigate('1');
     Orientation.lockToPortrait();
  };

  componentDidMount() {
  //this.removeArray();
  BackHandler.addEventListener('hardwareBackPress', this.homeExit);
    Orientation.lockToLandscape();
    this.displayData();
  }

    componentWillUnmount() {
       this.removeArray();
     BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
    //clearInterval(this.interval);
   // Orientation.lockToLandscape();
  }
  ';';

 displayData = async () => {
this.setState({records: []});
  try {
    const value = await AsyncStorage.getItem('@notes_key');
    console.log(JSON.parse(value));
    if (value !== null) {
      // We have data!!
       this.setState({
          logbook: JSON.parse(value),
        });
        // console.log(this.state.logbook);
      RNFS.readFile(path1, 'ascii')
        .then((ccc) => {
        console.log('has notes has counter');
       // console.log(ccc);
        imageN = Math.floor(Math.random() * this.state.logbook.length);
        this.setState({
        name : this.state.logbook[imageN],
        maxCount : ccc,
        });
        indexN = Notes.findIndex(item=> item.name ===  this.state.name);
       // console.log(this.state.name);
        })
        .catch((err) => {
        console.log(err.message, err.code);
        console.log('has notes no counter');
        imageN = Math.floor(Math.random() * this.state.logbook.length);
        this.setState({
        name : this.state.logbook[imageN],
        maxCount : 10,
        });
       // console.log(this.state.name);
        indexN = Notes.findIndex(item=> item.name ===  this.state.name);
       // console.log(indexN);
        });
    }
    else {
         RNFS.readFile(path1, 'ascii')
            .then((res) => {
              console.log('no notes has counter');
             imageN = Math.floor(Math.random() * Notes.length);
             indexN = imageN;
             this.setState({
             name : Notes[indexN].name,
            maxCount : res,
             });
             //console.log(res);
         })
         .catch(() => {
         // console.log(err.message, err.code);
          console.log('no notes no counter');
          imageN = Math.floor(Math.random() * Notes.length);
          indexN = imageN;
          this.setState({
          name : Notes[indexN].name,
          maxCount : 5,
          });
       });
    }
  } catch (error) {
    // Error retrieving data
  }
};

   handlerArgCall = async(correct, wrong, timer) => {
     var listR = [];
   let obj = {
      correct: correct,
      wrong: wrong,
      timer: timer,
      date: date,
      time: time,
      day : day,
    };
 this.setState({records : obj});
    try {
    var value = await AsyncStorage.getItem('@storage_key');
    if (value !== null) {
         value = JSON.parse(value);
         value.push(obj);
        //  console.log(value);
        // console.log('We have data!!');
           AsyncStorage.setItem('@storage_key', JSON.stringify(value), (err)=> {
          if (err){
              console.log('an error');
              throw err;
          }
     // console.log('success');
      }).catch((err)=> {
          console.log('error is: ' + err);
      });
    }
    else {
      listR.push(obj);
        AsyncStorage.setItem('@storage_key', JSON.stringify(listR), (err)=> {
          if (err){
              console.log('an error');
              throw err;
          }
     // console.log('success');  //console.log(JSON.stringify(this.state.listN));
      }).catch((err)=> {
          console.log('error is: ' + err);
      });
    }
} catch (error) {
    // Error retrieving data
}
  };

   //reset
   removeArray = () => {
    keywordsList.splice(0, keywordsList.length);
    console.log(keywordsList);
    this.setState({
      correct: this.state.correct,
      wrong: this.state.wrong,
    });
  };

  render() {
    BackHandler.addEventListener('hardwareBackPress', this.homeExit);
      const {
      selectedKeywordStyle,
      buttonStyle,
      textStyle,
      buttonB1,
      buttonB2,
      buttonB3,
      buttonB4,
      buttonB5,
      SbuttonB1,
      SbuttonB2,
      SbuttonB3,
      SbuttonB4,
      SbuttonB5,
      buttonB11,
      buttonB21,
      buttonB31,
      buttonB41,
      buttonB51,
      SbuttonB11,
      SbuttonB21,
      SbuttonB31,
      SbuttonB41,
      SbuttonB51,
    } = styles;

    const CorrectAlertBox = () =>{
    return (
       <Modal transparent={true} visible={this.state.showC}  animationType="slide">
         <View style={{backgroundColor: '#000000aa', flex: 1}}>
          <View
              style={{
                marginLeft: Dimensions.get('window').width * 0.25,
                width : Dimensions.get('window').width * 0.4,
                alignItems: 'center',
              }}>
                <ImageBackground
          source={require('../img/correctAlert.png')}
          style={{
            width: '130%',
            height: '95%',
          }}>
              <Text style={{fontSize: 25,textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Correct</Text>
              <View
              style={{
                alignItems: 'center',
                marginLeft:120,
              }}>
              <TouchableOpacity style={{
                backgroundColor: 'white',
                borderColor: 'black',
                padding: 15,
                borderRadius: 5,
                marginTop:10,
                marginBottom:10,
              }}
              onPress={() => this.setState({showC: false})}>
                <Text style={{color: 'black'}}>OK</Text>
              </TouchableOpacity>
              </View>
              </ImageBackground>
            </View>
          </View>
        </Modal>
    );
   };

   const WrongAlertBox = () =>{
    return (
      <Modal transparent={true} visible={this.state.showW} animationType="slide">
         <View style={{backgroundColor: '#000000aa', flex: 1}}>
          <View
              style={{
                marginLeft: Dimensions.get('window').width * 0.25,
                width : Dimensions.get('window').width * 0.4,
                alignItems: 'center',
              }}>
                <ImageBackground
          source={require('../img/wrongAlert.png')}
          style={{
            width: '130%',
            height: '95%',
          }}>
              <Text style={{fontSize: 25,textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Wrong</Text>
              <View
              style={{
                alignItems: 'center',
                marginLeft:120,
              }}>
              <TouchableOpacity style={{
                backgroundColor: 'white',
                borderColor: 'black',
                padding: 15,
                borderRadius: 5,
                marginTop:10,
                marginBottom:10,
              }}
              onPress={() => this.setState({showW: false})}>
                <Text style={{color: 'black'}}>OK</Text>
              </TouchableOpacity>
              </View>
              </ImageBackground>
            </View>
          </View>
        </Modal>
    );
   };

     const DoneAlertBox = () =>{
    return (
      <Modal transparent={true} visible={this.state.showDone} animationType="slide">
         <View style={{backgroundColor: '#000000aa', flex: 1}}>
           <View
              style={{
                marginTop: Dimensions.get('window').height * 0.6,
                marginLeft: Dimensions.get('window').width * 0.05,
                backgroundColor: 'white',
                width : Dimensions.get('window').width * 0.4,
                borderRadius: 5,
              }}>
              <Text style={{fontSize: 20, margin:10}}>Well Done</Text>
              <Text style={{fontSize: 15, marginLeft:10, color: 'green'}}>Correct : {this.state.correct}</Text>
              <Text style={{fontSize: 15, marginLeft:10, color:'red'}}>Wrong: {this.state.wrong}</Text>
              <View
              style={{
                alignItems: 'flex-end',
              }}>
              <TouchableOpacity style={{
                backgroundColor: 'black',
                padding: 15,
                borderRadius: 5,
                margin : 10,
              }}
              onPress={() => this.setState({showDone: false})}>
                <Text style={{color: 'white'}}>OK</Text>
              </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>
    );
   };

    return (
      <View style={styles.container}>
       <ImageBackground
          source={require('../img/background.jpg')}
          style={{
            width: '100%',
            height: '100%',
          }}>
        <CorrectAlertBox />
        <WrongAlertBox />
        <DoneAlertBox />
        <StatusBar hidden />
        <View style={styles.c1}>
          <View style={styles.cc1}>
          <Text style={styles.wrong}>{this.state.wrong}</Text>
            <Text style={styles.correct}>{this.state.correct} / {this.state.maxCount}</Text>
              <Stopwatch
            secs
            start={this.state.start}
            getTime={(tt) => {
              //console.log(tt);
              stime = tt;
            }}
            options={{ container: {
    backgroundColor: 'black',
    padding: 5,
    borderRadius: 10,
    borderColor:'white',
    borderWidth:3,
    width: 200,
    alignItems: 'center',
  },
  text: {
    fontSize: 25,
    color: '#FFF',
    textAlign: 'center',
    paddingTop: 5,
    alignItems: 'center',
  },
  }}
            // Options for the styling
          />
          </View>
          <View style={styles.buttonView}>
            <View style={styles.submit}>
              <Button
                title="RESET  "
                color="#E07EF9"
                onPress={this.removeArray}
              />
            </View>
            <View style={styles.submit}>
              <Button title="SUBMIT" color="#E07EF9" onPress={this.onSubmit} />
            </View>
          </View>
           <Image style={styles.logo} source={Notes[indexN].image} />
        </View>
         <View style={{borderWidth:5, borderColor:'black'}}/>
        <View style={styles.c2}>
          {NOTESWHITE.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? selectedKeywordStyle
                  : buttonStyle
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESCC.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? SbuttonB1
                  : buttonB1
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESDD.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? SbuttonB2
                  : buttonB2
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESFF.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? SbuttonB3
                  : buttonB3
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESGG.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? SbuttonB4
                  : buttonB4
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESAA.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? SbuttonB5
                  : buttonB5
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESCC1.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? SbuttonB11
                  : buttonB11
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESDD1.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? SbuttonB21
                  : buttonB21
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESFF1.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? SbuttonB31
                  : buttonB31
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESGG1.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? SbuttonB41
                  : buttonB41
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESAA1.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? SbuttonB51
                  : buttonB51
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
        </View>
        </ImageBackground>
      </View>
    );
  }
}

export default Quiz;

