LatihanSoal

/* eslint-disable react-native/no-color-literals */
/* eslint-disable import/first */
/* eslint-disable no-unused-vars */
import React from 'react';
import {View, Image, Text, TouchableOpacity, Alert, ScrollView, AsyncStorage, Button} from 'react-native';
import styles from './styles';
import PropTypes from 'prop-types';
import firebase from 'firebase';
import IMAGES from '../../configs/images';

export default class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      noSoal: 0,
      quiz_items: {},
      arrSoal: this.shuffle([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]),
      jawab: [],
      points: 0,
      isClicked: false
    };
  }

  getData = (firstIndex) => {
    firebase
      .app()
      .database()
      .ref(`quiz_items/quiz${firstIndex}`)
      .on('value', snap => {
        this.setState({quiz_items: snap.val()});
      });

    const arrayJawab = this.shuffle([1, 2, 3, 0]);
    const soals = [];

    for (let indexArr = 0; indexArr < arrayJawab.length; indexArr++) {
      firebase
        .app()
        .database()
        .ref(
          `quiz_items/quiz${firstIndex}/answers/answer${arrayJawab[indexArr]}/text`,
        )
        .on('value', snap => {
          soals[indexArr] = snap.val();
        });
    }

    this.setState({jawab: soals});
  };

  answerPressed = answer => {
    if (answer == this.state.quiz_items.correct) {
      this.setState({points: this.state.points + 1});
    } else {
      this.setState({points: this.state.points - 1});
    }
  };

  pressNext = async () => {
    this.setState({noSoal: this.state.noSoal + 1}, () => {
      this.getData(this.state.arrSoal[this.state.noSoal]);
    });
  };

  pressPrevious = () => {
    this.setState({noSoal: this.state.noSoal - 1}, () => {
      this.getData(this.state.arrSoal[this.state.noSoal]);
    });
  };

  pressFinish = async () => {
    this.props.navigation.navigate('FinishLatihan');
    await AsyncStorage.setItem('points', this.state.points.toString())
  };

  shuffle = array => {
    var currentIndex = array.length,
      temporaryValue,
      randomIndex;
    while (0 !== currentIndex) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }
    return array;
  };

  jawaban = () => {
    return this.state.jawab.map((data) => {
      return (
        <TouchableOpacity
          ref="myText"
          style={{justifyContent: 'center'}}
          onPress={this.answerPressed.bind(this, data)}
          >
          <View
            style={{
              width: 320,
              height: 55,
              borderWidth: 1,
              borderColor: '#A3A3A3',
              marginTop: 30,
              marginRight: 20,
              marginLeft: 20,
              borderRadius: 5,
            }}>
            <Text
              style={{
                margin: 15,
                fontSize: 15,
                color: '#515151',
                alignItems: 'center',
              }}>
              {data}
            </Text>
          </View>
        </TouchableOpacity>
      );
    });
  };

  selesai = () => {
    if (this.state.noSoal == this.state.arrSoal.length - 1) {
      return (
        <View style={{width: '80%'}}>
          <TouchableOpacity
            style={{marginLeft: 40, alignItems: 'flex-start'}}
            onPress={this.pressPrevious}>
            <Image
              source={IMAGES.previous}
              resizeMode="contain"
              style={{width: 25, height: 50}}
            />
          </TouchableOpacity>
          <TouchableOpacity
            style={{marginLeft: 20, alignItems: 'flex-start'}}
            onPress={this.pressFinish}>
            <Image
              source={IMAGES.buttonSelesai}
              resizeMode="contain"
              style={{width: 155, height: 50}}
            />
          </TouchableOpacity>
        </View>
      );
    } else if (this.state.noSoal == 0) {
      return (
        <View style={{marginTop: 40}}>
          <TouchableOpacity
            style={{marginRight: 40, alignItems: 'flex-end'}}
            onPress={this.pressNext}>
            <Image
              source={IMAGES.next}
              resizeMode="contain"
              style={{width: 25, height: 50}}
            />
          </TouchableOpacity>
        </View>
      );
    } else {
      return (
        <View style={{width: '20%'}}>
          <TouchableOpacity
            style={{marginLeft: 40, alignItems: 'flex-start'}}
            onPress={this.pressPrevious}>
            <Image
              source={IMAGES.previous}
              resizeMode="contain"
              style={{width: 25, height: 50}}
            />
          </TouchableOpacity>
          <TouchableOpacity
            style={{marginRight: 40, alignItems: 'flex-end'}}
            onPress={this.pressNext}>
            <Image
              source={IMAGES.next}
              resizeMode="contain"
              style={{width: 25, height: 50}}
            />
          </TouchableOpacity>
        </View>
      );
    }
  };

  componentDidMount() {
    const arrayJawab = this.shuffle([1, 2, 3, 0]);
    const soals = [];

    firebase
      .app()
      .database()
      .ref(`quiz_items/quiz${this.state.arrSoal[this.state.noSoal]}`)
      .on('value', snap => {
        this.setState({quiz_items: snap.val()});
      });

    for (let indexArr = 0; indexArr < arrayJawab.length; indexArr++) {
      firebase
        .app()
        .database()
        .ref(
          `quiz_items/quiz${
            this.state.arrSoal[this.state.noSoal]
          }/answers/answer${arrayJawab[indexArr]}/text`,
        )
        .on('value', snap => {
          soals[indexArr] = snap.val();
        });
    }

    this.setState({jawab: soals});
    console.log(this.state.noSoal);
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <View
          style={{
            width: 66,
            height: 30,
            backgroundColor: '#AEE7F9',
            margin: 20,
            borderRadius: 5,
          }}>
          <Text
            style={{
              textAlign: 'center',
              marginTop: 5,
              fontSize: 18,
              fontWeight: 'bold',
            }}>
            {this.state.noSoal + 1}/10
          </Text>
        </View>

        <View style={{paddingRight: 25, paddingLeft: 25}}>
          <Text
            style={{
              marginTop: 5,
              fontSize: 16,
              lineHeight: 25,
              color: '#515151',
            }}>
            {this.state.quiz_items.question}
          </Text>
        </View>

        {this.jawaban()}

        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginTop: 40,
          }}>
        </View>

        {this.selesai()}
          pressExit = () => {
            this.props.navigation.navigate('Kuis')
          };
      </View>
    );
  }
}

Component.propTypes = {
  navigation: PropTypes.object.isRequired,
};