import React, {Component} from 'react'
import{
    StyleSheet,
    View,
    TouchableOpacity,
    Text
} from 'react-native';

export default class TestScreen extends Component<Props> {
    state = {
      x: 0,
      y: 5,
      duration: tasks[0].duration,
      currentQuestion: tasks[0].question,
        answers: tasks[0].answers

    };

    nextQuestion = () => {
        this.setState({
            x: this.state.x + 1,
        })
    };




    tasks = [
        {
            "question" : "Pytanie 1",
            answers: [
                {
                    "content": "Odpowiedz 1",
                    "isCorrect" : true
                },
                {
                    "content": "Odpowiedz 2",
                    "isCorrect" : false
                },
                {
                    "content": "Odpowiedz 3",
                    "isCorrect" : false
                },
                {
                    "content": "Odpowiedz 4",
                    "isCorrect" : false
                },
            ],
            "duration": 30,
        },
        {
            "question" : "Pytanie 2",
            answers: [
                {
                    "content": "Odpowiedz 1",
                    "isCorrect" : false
                },
                {
                    "content": "Odpowiedz 2",
                    "isCorrect" : false
                },
                {
                    "content": "Odpowiedz 3",
                    "isCorrect" : true
                },
                {
                    "content": "Odpowiedz 4",
                    "isCorrect" : false
                },
            ],
            "duration": 40,
        },
        {
            "question" : "Pytanie 3",
            answers: [
                {
                    "content": "Odpowiedz 1",
                    "isCorrect" : false
                },
                {
                    "content": "Odpowiedz 2",
                    "isCorrect" : false
                },
                {
                    "content": "Odpowiedz 3",
                    "isCorrect" : true
                },
                {
                    "content": "Odpowiedz 4",
                    "isCorrect" : false
                },
            ],
            "duration": 40,
        },
        {
            "question" : "Pytanie 4",
            answers: [
                {
                    "content": "Odpowiedz 1",
                    "isCorrect" : false
                },
                {
                    "content": "Odpowiedz 2",
                    "isCorrect" : false
                },
                {
                    "content": "Odpowiedz 3",
                    "isCorrect" : true
                },
                {
                    "content": "Odpowiedz 4",
                    "isCorrect" : false
                },
            ],
            "duration": 40,
        },
        {
            "question" : "Pytanie 5",
            answers: [
                {
                    "content": "Odpowiedz 1",
                    "isCorrect" : false
                },
                {
                    "content": "Odpowiedz 2",
                    "isCorrect" : true
                },
                {
                    "content": "Odpowiedz 3",
                    "isCorrect" : true
                },
                {
                    "content": "Odpowiedz 4",
                    "isCorrect" : false
                },
            ],
            "duration": 75,
        },

    ];



    render() {
        return (
            <View style={styles.container}>
                <View style={{flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20, fontSize: 15}}>
                    <Text>Question {this.state.x+1} of {this.state.y}</Text>
                    <Text>Time: {this.state.duration} sec</Text>
                </View>
                <Text style={{fontSize: 18, textAlign: 'center', marginBottom: 25}}>{this.state.currentQuestion}</Text>
                <View style={styles.answers}>
                    <TouchableOpacity style={styles.answer} onPress={() => this.nextQuestion()}>
                        <Text>{this.state.answers[0]}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.answer}>
                        <Text>{this.state.answers[1]}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.answer}>
                        <Text>{this.state.answers[2]}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.answer}>
                        <Text>{this.state.answers[3]}</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }


};


const styles = StyleSheet.create({
    container: {
        flex: 1,

    },
    answers: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-around',
        borderStyle: 'solid',
        borderWidth: 1.7,
    },
    answer: {
        borderStyle: 'solid',
        borderRadius: 4,
        borderWidth: 1.2,
        alignItems: 'center',
        paddingTop: 18,
        paddingBottom: 18,
        width: '80%',
    }
});