import React,
{
    useState,
    useEffect
} from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
    StyleSheet,
    ScrollView,
} from 'react-native';

const TypingSpeedMonitorApp = () => {
    const sampleText =
`GeeksforGeeks is a computer science portal 
that provides a wide variety of resources 
for programmers and computer science
enthusiasts. It was created with the 
goal of providing high-quality educational 
content to help individuals learn and improve 
their programming and computer science skills.`;
    const [text, setText] = useState('');
    const [startTime, setStartTime] = useState(0);
    const [endTime, setEndTime] = useState(0);
    const [typingSpeed, setTypingSpeed] = useState(0);
    const [isTyping, setIsTyping] = useState(false);
    const [timer, setTimer] = useState(60);
    const [errors, setErrors] = useState(0);

    useEffect(() => {
        let timerInterval;

        if (isTyping) {
            timerInterval =
                setInterval(() => {
                    setTimer((prevTimer) => {
                        if (prevTimer === 1) {
                            clearInterval(timerInterval);
                            handleEndTyping();
                            return 60;
                        }
                        return prevTimer - 1;
                    });
                }, 1000);
        }

        return () => {
            clearInterval(timerInterval);
        };
    }, [isTyping]);

    useEffect(() => {
        if (startTime && endTime
            && text.trim().length > 0) {
            const timeDiffInSeconds =
                (endTime - startTime) / 1000;
            const wordsPerMinute =
                (text.split(' ').length /
                    timeDiffInSeconds) * 60;
            setTypingSpeed(wordsPerMinute.toFixed(2));
        }
    }, [endTime]);

    const handleStartTyping = () => {
        setText('');
        setStartTime(new Date().getTime());
        setIsTyping(true);
        setErrors(0);
    };

    const handleEndTyping = () => {
        setEndTime(new Date().getTime());
        setIsTyping(false);
        setTimer(60);
        if (text.trim().length > 0) {
            calculateErrors();
        }
    };

    const calculateErrors = () => {
        const sampleWords =
            sampleText.split(' ');
        const enteredWords =
            text.split(' ');

        let errorCount = 0;

        for (let i = 0; i < sampleWords.length; i++) {
            if (sampleWords[i] !==
                enteredWords[i]) {
                errorCount++;
            }
        }

        setErrors(errorCount);
    };

    const handleReset = () => {
        setText('');
        setStartTime(0);
        setEndTime(0);
        setTypingSpeed(0);
        setIsTyping(false);
        setTimer(60);
        setErrors(0);
    };

    return (
        <ScrollView
            contentContainerStyle={styles.container}>
            <Text style={styles.heading}>
                Typing Speed Monitor
            </Text>
            <Text style={styles.timer}>
                Timer:- {timer}s
            </Text>
            <Text style={styles.sampleText}>
                {sampleText}
            </Text>
            <TextInput
                style={styles.input}
                multiline
                placeholder="Type here..."
                value={text}
                onChangeText=
                {
                    (value) => setText(value)
                }
                editable={isTyping} />
            <View style={styles.buttonsContainer}>
                {isTyping ? (
                    <TouchableOpacity
                        style={styles.endButton}
                        onPress={handleEndTyping}>
                        <Text style={styles.buttonText}>
                            End Typing
                        </Text>
                    </TouchableOpacity>
                ) : (
                    <TouchableOpacity
                        style={styles.startButton}
                        onPress={handleStartTyping}>
                        <Text style={styles.buttonText}>
                            Start Typing
                        </Text>
                    </TouchableOpacity>
                )}
                <TouchableOpacity
                    style={styles.resetButton}
                    onPress={handleReset}>
                    <Text style={styles.buttonText}>
                        Reset
                    </Text>
                </TouchableOpacity>
            </View>
            {endTime > 0 && (
                <View style={styles.result}>
                    <Text style={styles.resultText}>
                        Typing Speed: {typingSpeed}
                        words per minute
                    </Text>
                    <Text style={styles.resultText}>
                        Error Count: {errors}
                    </Text>
                </View>
            )}
        </ScrollView>
    );
};

const styles = StyleSheet.create({

    container: {
        flexGrow: 1,
        padding: 16,
        backgroundColor: '#f8f8f8',
    },
    heading: {
        fontSize: 24,
        fontWeight: 'bold',
        marginTop: 30,
        marginBottom: 16,
        justifyContent: 'center',

    },
    timer: {
        fontSize: 26,
        fontWeight: 'bold',
        marginBottom: 16,
        marginLeft: 10,
        backgroundColor: 'yellow',
        marginRight: 130,
        borderRadius: 20,
    },
    sampleText: {
        marginBottom: 16,
        fontStyle: 'italic',
        textAlign: 'center',
        color: '#555',
        backgroundColor: 'lightgreen',
        borderRadius: 20,
        padding: 30,
        fontWeight: 'bold',
    },
    input: {
        height: 100,
        borderColor: '#3498db',
        borderWidth: 1,
        marginBottom: 16,
        padding: 8,
        fontSize: 16,
        color: '#333',
    },
    buttonsContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 16,
    },
    startButton: {
        flex: 1,
        backgroundColor: '#2ecc71',
        padding: 12,
        borderRadius: 8,
        alignItems: 'center',
        marginRight: 8,
    },
    endButton: {
        flex: 1,
        backgroundColor: '#e74c3c',
        padding: 12,
        borderRadius: 8,
        alignItems: 'center',
        marginRight: 8,
    },
    resetButton: {
        flex: 1,
        backgroundColor: '#3498db',
        padding: 12,
        borderRadius: 8,
        alignItems: 'center',
    },
    buttonText: {
        color: '#fff',
        fontWeight: 'bold',
    },
    result: {
        marginTop: 16,
        backgroundColor: '#fff',
        padding: 16,
        borderRadius: 8,
    },
    resultText: {
        fontSize: 16,
        marginBottom: 8,
        fontWeight: 'bold',
    },
});

export default TypingSpeedMonitorApp;