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

const BMICalculator = () => {
  const [weight, setWeight] = useState<string>('');
  const [height, setHeight] = useState<string>('');
  const [bmi, setBmi] = useState<string | null>(null);
  const [status, setStatus] = useState<string>('');

  const calculateBMI = () => {
    const w = parseFloat(weight);
    const h = parseFloat(height) / 100;
    if (w > 0 && h > 0) {
      const bmiValue = (w / (h * h)).toFixed(2);
      setBmi(bmiValue);
      setStatus(getBMIStatus(bmiValue));
    } else {
      setBmi(null);
      setStatus('');
    }
  };

  const getBMIStatus = (bmi: string): string => {
    const bmiValue = parseFloat(bmi);
    if (bmiValue < 18.5) return 'Alulsúlyos';
    if (bmiValue < 24.9) return 'Normál súlyú';
    if (bmiValue < 29.9) return 'Túlsúlyos';
    return 'Elhízott';
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>BMI Kalkulátor</Text>
      <TextInput
        style={styles.input}
        placeholder="Súly (kg)"
        keyboardType="numeric"
        value={weight}
        onChangeText={setWeight}
      />
      <TextInput
        style={styles.input}
        placeholder="Magasság (cm)"
        keyboardType="numeric"
        value={height}
        onChangeText={setHeight}
      />
      <Button title="BMI számítása" onPress={calculateBMI} />
      {bmi && (
        <View style={styles.resultContainer}>
          <Text style={styles.result}>BMI: {bmi}</Text>
          <Text style={styles.status}>{status}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  input: {
    width: '80%',
    padding: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    marginBottom: 10,
    backgroundColor: '#fff',
  },
  resultContainer: {
    marginTop: 20,
    alignItems: 'center',
  },
  result: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  status: {
    fontSize: 18,
    color: 'blue',
  },
});

export default BMICalculator;