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

import { useState, useEffect } from 'react';

import questions from './quiz.json';

export default function App() {

const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [isCorrect, setIsCorrect] = useState(false);
const [isShowResult, setIsShowResult] = useState(false);
const [selectedOption, setSelectedOption] = useState(null);
const [isOptionSelected, setIsSelected] = useState(false);
const [feedbackMessage, setFeedback] = useState('');
const [score, setScore] = useState(0);
const [timeLeft, setTimeLeft] = useState(15); // 15 seconds for each question

const question = questions[currentQuestionIndex];

useEffect(() => {
let timer = null;
if (!isOptionSelected && !isShowResult) {
// Start a timer for the current question
timer = setTimeout(() => {
handleTimeOut();
}, 15000); // 15 seconds in milliseconds

// Timer for display countdown

const countdown = setInterval(() => {
setTimeLeft((prevTime) => prevTime - 1);
}, 1000);

return () => {
clearTimeout(timer); // Clear the timeout when component unmounts or
question changes
clearInterval(countdown); // Clear the interval countdown
setTimeLeft(0); // Reset the time for the next question
};
}
}, [currentQuestionIndex, isOptionSelected]);

const handleTimeOut = () => {

if (!isOptionSelected) {
setIsSelected(true);
setIsCorrect(false);
setFeedback('Time is up! The correct answer was: ' +
questions[currentQuestionIndex].answer);
}
};
const formatTime = (timeInSeconds) => {
const minutes = Math.floor(timeInSeconds / 60);
const seconds = timeInSeconds % 60;
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};

const handleNext = () => {

if (currentQuestionIndex < questions.length - 1) {
setCurrentQuestionIndex(currentQuestionIndex + 1);
setFeedback('');
setIsCorrect(false);
setSelectedOption(null);
 setIsSelected(false);
setTimeLeft(15); // Reset timer for the next question
} else {
setIsShowResult(true);
}
};

const handlePressOnOption = (option) => {

if (!isOptionSelected) {
setSelectedOption(option);
setIsSelected(true);
if (option === questions[currentQuestionIndex].answer) {
setIsCorrect(true);
setScore(score + 10);
setFeedback('Brilliant.....You earned 10 points.');
} else {
setIsCorrect(false);
setFeedback('Wrong answer! Right answer was: ' +
questions[currentQuestionIndex].answer);
}
}
};

const handleResult = () => {

setIsShowResult(true);
};

const restartQuiz = () => {

setCurrentQuestionIndex(0);
setIsCorrect(false);
setIsShowResult(false);
setSelectedOption(null);
setIsSelected(false);
setFeedback('');
setScore(0);
setTimeLeft(15); // Reset time on restart
};

return (
<View style={styles.container}>
<Text style={styles.title}>General Knowledge Quiz</Text>
{!isShowResult ? (
<View>
<Text style={styles.timerText}>Time Left: {formatTime(timeLeft)}</Text>
<Text style={styles.questionText}>{question.statement}</Text>
<View style={styles.optionsContainer}>
{question.options.map((option) => (
<TouchableOpacity
key={option}
style={[
styles.optionButton,
selectedOption === option && {
borderColor: isCorrect ? 'green' : 'red',
backgroundColor: isCorrect && selectedOption === option ?
'#cbfdb9' : '#fdc1b9',
},
 ]}
onPress={() => handlePressOnOption(option)}
disabled={isOptionSelected} // Disable further selection after one
is made
>
<Text style={styles.optionText}>{option}</Text>
</TouchableOpacity>
))}
</View>
{currentQuestionIndex !== questions.length - 1 && (
<TouchableOpacity style={styles.nextButton} onPress={handleNext}
disabled={!isOptionSelected}>
<Text style={styles.nextButtonText}>Next</Text>
</TouchableOpacity>
)}
{currentQuestionIndex === questions.length - 1 && (
<TouchableOpacity style={styles.showresultBtn} onPress={handleResult}
disabled={!isOptionSelected}>
<Text style={styles.nextButtonText}>Show Result</Text>
</TouchableOpacity>
)}
{feedbackMessage !== '' && (
<Text style={styles.feedbackText}>{feedbackMessage}</Text>
)}
<Text style={styles.scoreText}>Your current score is: {score}</Text>
</View>
) : (
<View style={styles.resultsContainer}>
<Text style={styles.resultsTitle}>Quiz Results</Text>
<Text style={styles.scoreText}>Your final score is: {score}</Text>
<Text style={styles.correctAnswersTitle}>Correct Answers:</Text>
{questions.map((question, index) => (
<Text key={index} style={styles.answerText}>
{`${index + 1}: ${question.answer}`}
</Text>
))}
<TouchableOpacity style={styles.restartButton} onPress={restartQuiz}>
<Text style={styles.restartButtonText}>Restart Quiz</Text>
</TouchableOpacity>
</View>
)}
</View>
);
}

const styles = StyleSheet.create({

container: {
padding: 20,
marginTop: 20,
},
title: {
fontSize: 22,
textAlign: 'center',
fontWeight: 'bold',
color: 'white',
backgroundColor: 'purple',
borderWidth: 3,
padding: 15,
borderRadius: 15,
 marginBottom: 17,
borderColor: '#DAF7A6',
},
questionText: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
},
optionsContainer: {
marginTop: 10,
},
feedbackText: {
fontSize: 15,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 10,
textAlign: 'center',
},

optionButton: {
backgroundColor: 'white',
padding: 10,
borderWidth: 3,
borderColor: '#ce97f0',
borderRadius: 5,
marginBottom: 10,
},
optionText: {
fontSize: 16,
},
nextButton: {
backgroundColor: '#007BFF',
padding: 10,
borderRadius: 5,
alignItems: 'center',
},
showresultBtn: {
backgroundColor: 'green',
padding: 10,
borderRadius: 5,
alignItems: 'center',
},
nextButtonText: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: 'bold',
},
scoreText: {
fontSize: 18,
fontWeight: 'bold',
marginTop: 10,
textAlign: 'center',
color: 'white',
backgroundColor: 'purple',
padding: 10,
borderRadius: 10,
},
resultsContainer: {
marginTop: 20,
 padding: 10,
backgroundColor: '#f9f9f9',
borderRadius: 10,
borderWidth: 1,
borderColor: '#ddd',
},
resultsTitle: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 10,
},
correctAnswersTitle: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 10,
},
answerText: {
fontSize: 16,
marginBottom: 5,
},
restartButton: {
marginTop: 20,
backgroundColor: '#007BFF',
padding: 10,
borderRadius: 5,
alignItems: 'center',
},
restartButtonText: {
color: '#FFFFFF',
fontSize: 16,
},
timerText: {
fontSize: 15,
maxWidth:"50vw",
padding:8,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
marginTop: 10,
marginBottom: 20,
backgroundColor:"red",
borderRadius:10
},
});