/* 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,
  ScrollView,
  StyleSheet,
} from 'react-native';
import {Stopwatch} from 'react-native-stopwatch-timer';
import Orientation from 'react-native-orientation';
//import * as RNFS from 'react-native-fs';
import Listennotes from './dataListen';
//import OtherClass from './saveRecords';
import Sound from 'react-native-sound';
//import moment from 'moment';
//import AsyncStorage from '@react-native-async-storage/async-storage';

const config = {
  deviceWidth: Dimensions.get('window').height,
  deviceHeight: Dimensions.get('window').width,
};
//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 NOTESWHITE = [{name: 'A0'},{name: 'B0'},
  {name: 'C1'},{name: 'D1'},{name: 'E1'},{name: 'F1'},{name: 'G1'},{name: 'A1'},{name: 'B1'},
  {name: 'C2'},{name: 'D2'},{name: 'E2'},{name: 'F2'},{name: 'G2'},{name: 'A2'},{name: 'B2'},
  {name: 'C3'},{name: 'D3'},{name: 'E3'},{name: 'F3'},{name: 'G3'},{name: 'A3'},{name: 'B3'},
  {name: 'C4'},{name: 'D4'},{name: 'E4'},{name: 'F4'},{name: 'G4'},{name: 'A4'},{name: 'B4'},
  {name: 'C5'},{name: 'D5'},{name: 'E5'},{name: 'F5'},{name: 'G5'},{name: 'A5'},{name: 'B5'},
  {name: 'C6'},{name: 'D6'},{name: 'E6'},{name: 'F6'},{name: 'G6'},{name: 'A6'},{name: 'B6'},
  {name: 'C7'},{name: 'D7'},{name: 'E7'},{name: 'F7'},{name: 'G7'},{name: 'A7'},{name: 'B7'},
  {name: 'C8'},
];

const NOTESBLACK = [{name: 'A#0', left: 0.046},
  {name: 'C#1',left: 0.195},{name: 'D#1',left: 0.27},{name: 'F#1',left: 0.42},{name: 'G#1',left: 0.496},{name: 'A#1',left: 0.57},
  {name: 'C#2',left: 0.72},{name: 'D#2',left: 0.795},{name: 'F#2',left: 0.945},{name: 'G#2',left: 1.02},{name: 'A#2',left: 1.095},
  {name: 'C#3',left: 1.245},{name: 'D#3',left: 1.32},{name: 'F#3',left: 1.47},{name: 'G#3',left: 1.545},{name: 'A#3',left: 1.62},
  {name: 'C#4',left: 1.77},{name: 'D#4',left: 1.845},{name: 'F#4',left: 1.995},{name: 'G#4',left: 2.07},{name: 'A#4',left: 2.145},
  {name: 'C#5',left: 2.295},{name: 'D#5',left: 2.37},{name: 'F#5',left: 2.52},{name: 'G#5',left: 2.595},{name: 'A#5',left: 2.67},
  {name: 'C#6',left: 2.82},{name: 'D#6',left: 2.899},{name: 'F#6',left: 3.045},{name: 'G#6',left: 3.12},{name: 'A#6',left: 3.197},
  {name: 'C#7',left: 3.345},{name: 'D#7',left: 3.42},{name: 'F#7',left: 3.57},{name: 'G#7',left: 3.645},{name: 'A#7',left: 3.72},
];

const keywordsList = [];
const corSound = require('../media/sound/correct.mp3');
const wroSound = require('../media/sound/wrong.mp3');
const keySound = Listennotes;

var soundN = '';
var indexS = 0;
var stime = 0;
//var records = [];


class Listen 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) => {
    console.log(keyword);
    //indexS = Listennotes.findIndex(item=> item.name === keyword);
    console.log(Listennotes[soundN].name);
      if (keyword === Listennotes[soundN].name) {
         this.correctAlert();
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({correct : this.state.correct + 1});
        this.setState({showDone: true});
      }
      else {
        this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
        this.randomSound();
    }
    } else {
       this.wrongAlert();
      if ( (this.state.count + 1) > this.state.maxCount) {
        this.setState({wrong : this.state.wrong + 1});
        this.setState({showDone: true});
      }
      else {
        this.setState({showW: true});
        this.setState({wrong : this.state.wrong + 1, count:this.state.count + 1});
         this.randomSound();
    }
    }
  };


  homeExit = async () => {
   this.setState({showQuit: true});
  };


  playButton = () => {

   console.log('play');
    console.log(soundN);
    console.log(Listennotes[soundN]);
    this.setState({name : Listennotes[soundN].name});
    var playSound = new Sound(keySound[soundN].url, (error) => {
      if (error) {
        console.log('failed to load the sound', error);
        return;
      }
      // loaded successfully
      playSound.play((success) => {
        if (success) {
         // console.log('successfully finished playing');
        } else {
         // console.log('playback failed due to audio decoding errors');
          playSound.release();
        }
      });
    });

  };

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

 reset = () => {
   this.setState({count:1});
  };

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

  randomSound = () =>{
     soundN = Math.floor(Math.random() * keySound.length);
  };

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

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

  render() {
    return (
      <View style={styles.container}>
       <ImageBackground
          source={require('../media/img/background.jpg')}
          style={{
            width: '100%',
            height: '100%',
          }}>


            <Modal transparent={true} visible={this.state.showQuit} animationType="slide">
         <View style={{backgroundColor: '#000000aa', flex: 1}}>
          <View
              style={{
                marginLeft: Dimensions.get('window').width * 0.35,
                width : Dimensions.get('window').width * 0.4,
                height : Dimensions.get('window').height * 0.4,
                marginTop : Dimensions.get('window').height * 0.25,
                alignItems: 'center',
                backgroundColor:'white',
                borderRadius: 10,
                borderColor: 'black',
                borderWidth: 5,
              }}>

              <Text style={{fontSize: 25,textAlign: 'center', marginTop: 5, color:'black'}}>Quit?</Text>
              <View
              style={{
                alignItems: 'center',
                flexDirection: 'row',
                marginTop:15,
              }}>
               <TouchableOpacity style={{
                backgroundColor: 'white',
                padding: 15,
                borderRadius: 10,
                marginTop:10,
                marginBottom:10,
                borderTopColor:'black',
                borderRightColor:'black',
                borderWidth: 3,
                marginRight:5,

              }}
                 onPress={() => this.backAction()}>
                <Text style={{color: 'black'}}>YES</Text>
              </TouchableOpacity>
              <TouchableOpacity style={{
                backgroundColor: 'white',
                paddingLeft: 18,
                paddingRight: 18,
                paddingTop: 15,
                paddingBottom: 15,
                borderRadius: 10,
                marginTop:10,
                marginBottom:10,
                borderWidth: 3,
                borderTopColor:'black',
                marginLeft:5,
              }}
              onPress={() => this.setState({showQuit: false})}>
                <Text style={{color: 'black'}}>NO</Text>
              </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>

        <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('../media/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>

         <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('../media/img/wrongAlert.png')}
          style={{
            width: '130%',
            height: '95%',
          }}>
              <Text style={{fontSize: 25,fontFamily: 'sans-serif', textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Wrong</Text>
              <Text style={{fontSize: 15,fontFamily: 'sans-serif', textAlign: 'center', marginLeft:120, color:'white'}}>Answer: {this.state.name}</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',fontFamily: 'sans-serif'}}>OK</Text>
              </TouchableOpacity>
              </View>
              </ImageBackground>
            </View>
          </View>
        </Modal>

   <Modal transparent={true} visible={this.state.showDone} animationType="slide">
         <View style={{backgroundColor: '#000000aa', flex: 1}}>
          <View
              style={{
                marginLeft: Dimensions.get('window').width * 0.3,
                width : Dimensions.get('window').width * 0.4,
                alignItems: 'center',
              }}>
                <ImageBackground
          source={require('../media/img/doneAlert.png')}
          style={{
            width: '120%',
            height: '98%',
          }}>
                   <Text style={{fontSize: 25,fontFamily: 'sans-serif', textAlign: 'center', marginTop:Dimensions.get('window').height * 0.42, marginLeft:65, color:'white'}}>Well Done</Text>
              <Text style={{fontSize: 15, fontFamily: 'sans-serif', marginLeft:65, textAlign: 'center', color: 'green'}}>Correct : {this.state.correct}</Text>
              <Text style={{fontSize: 15, fontFamily: 'sans-serif', marginLeft:65, textAlign: 'center', color:'red'}}>Wrong: {this.state.wrong}</Text>
              <View
              style={{
                alignItems: 'center',
                marginLeft:70,
              }}>
              <TouchableOpacity style={{
                backgroundColor: 'white',
                borderColor: 'black',
                padding: 15,
                borderRadius: 5,
                marginTop:5,
                marginBottom:10,
              }}
              onPress={() => this.backAction()}>
                <Text style={{color: 'black', fontFamily: 'sans-serif'}}>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={{ 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',
  },
  }}
            // Options for the styling
          />
          </View>
          <View>
            <View style={styles.submit}>
              <Button
                title="  PLAY  "
                color="#E07EF9"
                onPress={this.playButton}
              />
            </View>
          </View>
        </View>
      <View style={{borderWidth:5, borderColor:'black'}}/>
         <ScrollView
            horizontal={true}
            style={{
              flexDirection: 'row',
            }}
            showsHorizontalScrollIndicator={false}>
            {NOTESWHITE.map((item,id) => (
             <TouchableHighlight
              style={
                keywordsList.find((element) => element === item.name)
                   ? styles.selectedKeywordStyle
                  : styles.buttonStyle
              }
              onPress={() => this.toggleKeyword(item.name)}
              key={id}>
              <Text style={styles.textStyle}> {item.name} </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.textStyleB}>{item.name}</Text>
            </TouchableHighlight>
          ))}
          </ScrollView>
        </ImageBackground>
      </View>
    );
  }
}

export default Listen;

const styles = StyleSheet.create({
  c1: {
    height: '55%',
    alignItems: 'center',
    borderColor: 'black',
    marginTop:5,
  },
  cc1: {
    flexDirection: 'row',
    marginLeft: 5,
  },
  t: {
    fontSize: 25,
    fontFamily: 'sans-serif',
  },
  c2: {
    flexDirection: 'row',
    height: '35%',
  },

  t1: {
    color: 'black',
    paddingTop: 120,
  },
  button: {
    flex: 7,
    alignItems: 'center',
    backgroundColor: 'white',
    borderRightWidth: 1,
    borderColor: 'black',
    borderBottomWidth: 1,
  },
  b1: {
    marginBottom: 25,
    width: 200,
    height: 50,
    borderRadius: 15,
    alignItems: 'center',
    backgroundColor: 'purple',
  },
  buttonText: {
    textAlign: 'center',
    paddingTop: 15,
    color: 'white',
    fontSize: 15,
    fontFamily: 'sans-serif',
  },
  logo: {
    height: config.deviceWidth * 0.22,
    width: config.deviceHeight * 0.5,
    borderColor: 'black',
    borderWidth: 3,
    borderRadius: 10,
    position: 'absolute',
    marginTop: config.deviceWidth * 0.11,
    backgroundColor:'white',
  },
  correct: {
    width: 100,
    textAlign: 'center',
    paddingTop: 15,
    color: 'white',
    height: 60,
    borderRadius: 10,
    alignItems: 'center',
    fontSize: 25,
    marginRight: 10,
    backgroundColor:'green',
    borderColor:'white',
     borderWidth: 2,
     fontFamily: 'sans-serif',
  },
  wrong: {
    width: 100,
    height: 60,
    borderRadius: 10,
    borderColor:'white',
    alignItems: 'center',
    textAlign: 'center',
    paddingTop: 15,
    color: 'white',
    fontSize: 25,
    marginRight: 10,
    backgroundColor:'red',
     borderWidth: 2,
     fontFamily: 'sans-serif',
  },
  timer: {
    width: 65,
    height: 60,
    borderRadius: 10,
    borderColor:'white',
    alignItems: 'center',
    textAlign: 'center',
    paddingTop: 16,
    color: 'white',
    fontSize: 25,
    backgroundColor:'black',
     borderWidth: 2,
     fontFamily: 'sans-serif',
  },
  submit: {
    width: '40%',
    marginTop: config.deviceWidth * 0.055,
    borderColor:'white',
    borderWidth: 2,
    borderRadius: 5,
  },
  viewMain: {
    width: '20%',
    alignContent: 'flex-end',
    marginLeft: 180,
    marginTop: '173%',
    position: 'absolute',
  },

  container: {
    flex: 1,
  },
  textStyle: {
    fontSize: 16,
    padding: 8,
    paddingTop:100,
    textAlign: 'center',
    fontFamily: 'sans-serif',
  },
   textStyleB: {
    fontSize: 16,
    padding: 8,
    paddingTop:5,
    textAlign: 'center',
    color:'white',
    fontFamily: 'sans-serif',
  },
  buttonView: {
    flexDirection: 'column',
    marginLeft: config.deviceHeight * 1.0,
  },
  buttonStyle: {
    width: config.deviceWidth * 0.075,
    alignItems: 'center',
    backgroundColor: 'white',
    borderRightWidth: 1,
    borderColor: 'black',
    borderBottomWidth: 1,
  },
  selectedKeywordStyle: {
    width: config.deviceWidth * 0.075,
    alignItems: 'center',
    backgroundColor: '#EEA1E1',
    borderRightWidth: 1,
    borderColor: 'black',
    borderBottomWidth: 1,
  },
  buttonB1: {
    alignItems: 'center',
    backgroundColor: 'black',
    height: '55%',
    width: '1.5%',
    position: 'absolute',
  },
  SbuttonB1: {
    alignItems: 'center',
    backgroundColor: 'black',
    height: '55%',
   marginLeft: config.deviceWidth * 0.048,
    width: '1.5%',
    position: 'absolute',
  },
});
