/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableHighlight,
  ImageBackground,
  Image,
  Button,
  Alert,
} from 'react-native';
import styles from './style.js';
import {useNavigation} from '@react-navigation/native';

const NOTESWHITE = [
  'C1',
  'D1',
  'E1',
  'F1',
  'G1',
  'A1',
  'B1',
  'C2',
  'D2',
  'E2',
  'F2',
  'G2',
  'A2',
  'B2',
];
const NOTESCC = ['Db1'];
const NOTESDD = ['Eb1'];
const NOTESFF = ['Gb1'];
const NOTESGG = ['Ab1'];
const NOTESAA = ['Bb1'];
const NOTESCC1 = ['Db2'];
const NOTESDD1 = ['Eb2'];
const NOTESFF1 = ['Gb2'];
const NOTESGG1 = ['Ab2'];
const NOTESAA1 = ['Bb2'];
const keywordsList = [];

export default class Quiz13 extends Component {
  constructor(props: Object) {
    super(props);
    this.state = {
      timer: 0,
      correct: 0,
      wrong: 0,
      keywordsList: '',
    };
  }
  toggleKeyword = (keyword) => {
    let list = keywordsList;
    let index = -1;
    if ((index = keywordsList.indexOf(keyword)) !== -1) {
      list.splice(index, 1);
      console.log(list);
    } else {
      list.push(keyword);
      console.log(list);
    }
    this.setState({keywordsList: list});
  };

  //reset
  removeArray = () => {
    keywordsList.splice(0, keywordsList.length);
    console.log(keywordsList);
    this.setState({
      timer: 0,
    });
    clearInterval(this._interval);
  };

  onSubmit = () => {
    console.log(keywordsList.toString());
    const fullnotes = keywordsList.toString();
    if (
      fullnotes.includes('Ab1') &&
      fullnotes.includes('Bb1') &&
      fullnotes.includes('C2') &&
      fullnotes.includes('Db2') &&
      fullnotes.includes('Eb2') &&
      fullnotes.includes('F2') &&
      fullnotes.includes('G2') &&
      fullnotes.includes('Ab2')
    ) {
      // if (keywordsList.toString() === 'Ab1,Bb1,C2,Db2,Eb2,F2,G2,Ab2') {
      this.setState({
        timer: 0,
      });
      clearInterval(this._interval);
      Alert.alert('Correct!');
      keywordsList.splice(0, keywordsList.length);
      this.props.navigation.navigate('14', {
        c: this.state.correct + 2,
        w: this.state.wrong,
      });
    } else {
      console.log('wrong');
      this.setState({
        timer: 0,
      });
      clearInterval(this._interval);
      keywordsList.splice(0, keywordsList.length);
      Alert.alert('Wrong!');
      this.props.navigation.navigate('14', {
        c: this.state.correct,
        w: this.state.wrong + 1,
      });
    }
  };

  componentDidMount() {
    this.setState({
      correct: this.props.route.params.c,
      wrong: this.props.route.params.w,
    });
    this.interval = setInterval(
      () => this.setState((prevState) => ({timer: prevState.timer + 1})),
      1500,
    );
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }
  ';';

  render() {
    const {
      container,
      selectedKeywordStyle,
      buttonStyle,
      textStyle,
      buttonB1,
      buttonB2,
      buttonB3,
      buttonB4,
      buttonB5,
      SbuttonB1,
      SbuttonB2,
      SbuttonB3,
      SbuttonB4,
      SbuttonB5,
      buttonB11,
      buttonB21,
      buttonB31,
      buttonB41,
      buttonB51,
      SbuttonB11,
      SbuttonB21,
      SbuttonB31,
      SbuttonB41,
      SbuttonB51,
    } = styles;
    return (
      <View style={styles.container}>
        <View style={styles.c1}>
          <View style={styles.cc1}>
            <Text style={styles.correct}>Correct : {this.state.correct}</Text>
            <Text style={styles.wrong}>
              Wrong :{'\n'}
              {this.state.wrong}
            </Text>
            <Text style={styles.timer}>
              Timer :{'\n'}
              {this.state.timer}
            </Text>
          </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={require('./img/Aflatmajor.png')} />
        </View>
        <View style={styles.c2}>
          {NOTESWHITE.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? selectedKeywordStyle
                  : buttonStyle
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESCC.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? SbuttonB1
                  : buttonB1
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESDD.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? SbuttonB2
                  : buttonB2
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESFF.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? SbuttonB3
                  : buttonB3
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESGG.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? SbuttonB4
                  : buttonB4
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESAA.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? SbuttonB5
                  : buttonB5
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESCC1.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? SbuttonB11
                  : buttonB11
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESDD1.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? SbuttonB21
                  : buttonB21
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESFF1.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? SbuttonB31
                  : buttonB31
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESGG1.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? SbuttonB41
                  : buttonB41
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
          {NOTESAA1.map((item, id) => (
            <TouchableHighlight
              style={
                keywordsList.find((element) => element === item)
                  ? SbuttonB51
                  : buttonB51
              }
              onPress={() => this.toggleKeyword(item)}
              key={id}>
              <Text style={textStyle}> </Text>
            </TouchableHighlight>
          ))}
        </View>
      </View>
    );
  }
}
