/* 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,
  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/styleQuiz';
import config from '../style/config';
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 path1 = RNFS.DocumentDirectoryPath + '/counter.txt';
const NOTESWHITE = [
  {name: 'C1', url: require('../media/sound/c.mp3')},
  {name: 'D1', url: require('../media/sound/d.mp3')},
  {name: 'E1', url: require('../media/sound/e.mp3')},
  {name: 'F1', url: require('../media/sound/f.mp3')},
  {name: 'G1', url: require('../media/sound/g.mp3')},
  {name: 'A1', url: require('../media/sound/a.mp3')},
  {name: 'B1', url: require('../media/sound/b.mp3')},
  {name: 'C2', url: require('../media/sound/cc.mp3')},
  {name: 'D2', url: require('../media/sound/dd.mp3')},
  {name: 'E2', url: require('../media/sound/ee.mp3')},
  {name: 'F2', url: require('../media/sound/ff.mp3')},
  {name: 'G2', url: require('../media/sound/gg.mp3')},
  {name: 'A2', url: require('../media/sound/aa.mp3')},
  {name: 'B2', url: require('../media/sound/bb.mp3')},
];
const NOTESBLACK = [
  {name: 'C#1', url: require('../media/sound/c_c.mp3'), left:0.048},
  {name: 'D#1', url: require('../media/sound/d_d.mp3'),left:0.123},
  {name: 'F#1', url: require('../media/sound/d_d.mp3'),left:0.275},
  {name: 'G#1', url: require('../media/sound/f_f.mp3'),left:0.348},
  {name: 'A#1', url: require('../media/sound/g_g.mp3'), left:0.423},
  {name: 'C#2', url: require('../media/sound/a_a.mp3'), left:0.575},
  {name: 'D#2', url: require('../media/sound/c_cc.mp3'), left:0.65},
  {name: 'F#2', url: require('../media/sound/d_dd.mp3'), left:0.798},
  {name: 'G#2', url: require('../media/sound/f_ff.mp3'), left:0.872},
  {name: 'A#2', url: require('../media/sound/g_gg.mp3'), left:0.95},
];
const keywordsList = [];
const corSound = require('../media/sound/correct.mp3');
const wroSound = require('../media/sound/wrong.mp3');

var imageN = '';
var indexN = 0;
var stime = 0;

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'){
      this.correctAlert();
      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 {
        this.wrongAlert();
      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 {
        keywordsList.splice(0, keywordsList.length);
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1, showW: true});
        this.displayData();
    }
    }
  };

  ansDMajor = () => {
     if (keywordsList.toString() === 'D1,E1,F#1,G1,A1,B1,C#2,D2') {
            this.correctAlert();
     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 {
       this.wrongAlert();
      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') {
       this.correctAlert();
       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 {
       this.wrongAlert();
      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') {
         this.correctAlert();
      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 {
         this.wrongAlert();
      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') {
          this.correctAlert();
       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 {
      this.wrongAlert();
      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') {
       this.correctAlert();
       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 {
       this.wrongAlert();
      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') {
              this.correctAlert();
      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 {
        this.wrongAlert();
      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') {
        this.correctAlert();
      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 {
         this.wrongAlert();
      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') {
             this.correctAlert();
       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 {
        this.wrongAlert();
      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') {
         this.correctAlert();
      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 {
       this.wrongAlert();
      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') {
        this.correctAlert();
       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 {
       this.wrongAlert();
      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') {
        this.correctAlert();
      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 {
       this.wrongAlert();
      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') {
              this.correctAlert();
       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 {
           this.wrongAlert();
      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') {
          this.correctAlert();
      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 {
         this.wrongAlert();
      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.setState({showQuit: true});

  };

   backAction = () => {
   this.setState({showDone: false, showQuit: false});
   this.props.navigation.navigate('1');
   Orientation.lockToPortrait();
  };

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

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

  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() {
    return (
     <View style={styles.container}>
       <ImageBackground
          source={require('../media/img/background.jpg')}
          style={styles.imagebackground}>

         {/* Modal Quit the Scale*/}
         <Modal transparent={true} visible={this.state.showQuit} animationType="slide">
         <View style={styles.modalbackground}>
          <View style={styles.viewmodalQ}>
              <Text style={styles.textquit}>Quit?</Text>
              <View
              style={styles.viewmodalQQ}>
               <TouchableOpacity style={styles.buttonyes}
                 onPress={() => this.backAction()}>
                <Text style={styles.textqq}>YES</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.buttonno}
              onPress={() => this.setState({showQuit: false})}>
                <Text style={styles.textqq}>NO</Text>
              </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>

        {/* Modal Correct*/}
        <Modal transparent={true} visible={this.state.showC}  animationType="slide">
         <View style={styles.modalbackground}>
          <View style={styles.viewmodalCW}>
          <ImageBackground source={require('../media/img/correctAlert.png')} style={styles.imagecw}>
              <Text style={styles.textcw}>Correct</Text>
              <View style={styles.viewbutton}>
              <TouchableOpacity style={styles.buttonc} onPress={() => this.setState({showC: false})}>
                <Text style={styles.buttonok}>OK</Text>
              </TouchableOpacity>
              </View>
              </ImageBackground>
            </View>
          </View>
        </Modal>

        {/* Modal Wrong*/}
         <Modal transparent={true} visible={this.state.showW} animationType="slide">
         <View style={styles.modalbackground}>
          <View style={styles.viewmodalCW}>
            <ImageBackground source={require('../media/img/wrongAlert.png')} style={styles.imagecw}>
              <Text style={styles.textcw}>Wrong</Text>
               <View style={styles.viewbutton}>
                <TouchableOpacity style={styles.buttonc} onPress={() => this.setState({showW: false})}>
                <Text style={styles.buttonok}>OK</Text>
              </TouchableOpacity>
              </View>
              </ImageBackground>
            </View>
          </View>
        </Modal>

        {/* Modal Done*/}
        <Modal transparent={true} visible={this.state.showDone} animationType="slide">
         <View style={styles.modalbackground}>
          <View style={styles.viewmodalD}>
            <ImageBackground source={require('../media/img/doneAlert.png')} style={styles.imagedone}>
              <Text style={styles.textwelldone}>Well Done</Text>
              <Text style={styles.modaltextcorrect}>Correct : {this.state.correct}</Text>
              <Text style={styles.modaltextwrong}>Wrong: {this.state.wrong}</Text>
              <View
              style={styles.viewmodalDD}>
              <TouchableOpacity style={styles.buttonc} onPress={() => this.backAction()}>
                <Text style={styles.buttonok}>OK</Text>
              </TouchableOpacity>
              </View>
              </ImageBackground>
            </View>
          </View>
        </Modal>

        <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 for the styling
            options={{//timer
                      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',
                        fontFamily: 'sans-serif',
                      }}}/>
          </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)
                  ? styles.selectedKeywordStyle
                  : styles.buttonStyle
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={styles.textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESBLACK.map((item, id) => (
                <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                  ? [styles.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
                  : [styles.buttonB1, {marginLeft: config.deviceWidth * item.left}]
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={styles.textStyle}> </Text>
            </TouchableHighlight>
          ))}
        </View>
        </ImageBackground>
      </View>
    );
  }
}

export default Quiz;

