Untitled

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

export function Calculadora() {
    const [displayValue, setDisplayValue] = useState<string>('0');
    const [operator, setOperator] = useState<string>("");
    const [firstValue, setFirstValue] = useState<number>(0);
    const [secondValue, setSecondValue] = useState<number>(0);
    const [isResult, setIsResult] = useState(false);

    function handleNumberInput(value: string) {
        if (isResult) {
            setDisplayValue(value);
            setFirstValue(0);
            setSecondValue(0);
            setOperator("");
            setIsResult(false);
        } else {
            setDisplayValue(displayValue === '0' ? value : displayValue + value);
        }
    }

    function handleOperatorInput(value: string) {
        if (firstValue === null) {
            setFirstValue((parseInt(displayValue)));
            setOperator(value);
            setDisplayValue('0');
        } else if (operator === null) {
            setOperator(value);
        } else if (secondValue === null) {
            setSecondValue(parseFloat(displayValue));
            calculateResult();
        }
    }

    function calculateResult() {
        let result = 0;

        switch (operator) {
            case '+':
                result = firstValue + secondValue;
                break;
            case '-':
                result = firstValue - secondValue;
                break;
            case '*':
                result = firstValue * secondValue;
                break;
            case '/':
                result = firstValue / secondValue;
                break;
            default:
                result = 0;
                break;
        }

        setDisplayValue(result.toString());
        setFirstValue(result);
        setSecondValue(0);
        setOperator("");
        setIsResult(true);
    }

    function handleClearInput() {
        setDisplayValue('0');
        setFirstValue(0);
        setSecondValue(0);
        setOperator("");
        setIsResult(false);
    }

    return (
        <View style={styles.container}>
            <Text style={styles.display}>{displayValue}</Text>
            <View style={styles.buttonRow}>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('7')}>
                    <Text style={styles.buttonText}>7</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('8')}>
                    <Text style={styles.buttonText}>8</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('9')}>
                    <Text style={styles.buttonText}>9</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleOperatorInput('/')}>
                    <Text style={styles.buttonText}>÷</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.buttonRow}>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('4')}>
                    <Text style={styles.buttonText}>4</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('5')}>
                    <Text style={styles.buttonText}>5</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('6')}>
                    <Text style={styles.buttonText}>6</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleOperatorInput('*')}>
                    <Text style={styles.buttonText}>X</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.buttonRow}>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('1')}>
                    <Text style={styles.buttonText}>1</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('2')}>
                    <Text style={styles.buttonText}>2</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('3')}>
                    <Text style={styles.buttonText}>3</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleClearInput()}>
                    <Text style={styles.buttonText}>C</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.buttonRow}>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('0')}>
                    <Text style={styles.buttonText}>0</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('00')}>
                    <Text style={styles.buttonText}>00</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => calculateResult()}>
                    <Text style={styles.buttonText}>=</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleOperatorInput('+')}>
                    <Text style={styles.buttonText}>{'<'}</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.buttonRow}>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('0')}>
                    <Text style={styles.buttonText}>0</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleNumberInput('00')}>
                    <Text style={styles.buttonText}>00</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => calculateResult()}>
                    <Text style={styles.buttonText}>=</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => handleOperatorInput('+')}>
                    <Text style={styles.buttonText}>      
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
        justifyContent: 'flex-end',
        padding: 16,
    },
    display: {
        fontSize: 48,
        fontWeight: 'bold',
        color: '#333333',
        marginBottom: 32,
    },
    buttonRow: {
        flexDirection: 'row',
        marginBottom: 16,
    },
    button: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 4,
        marginHorizontal: 8,
        height: 64,
    },
    buttonText: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#333333',
    },
});