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

const App = () => {
  const [cisloPolozky, setCisloPolozky] = useState('');
  const [pocetVKartonu, setPocetVKartonu] = useState('');
  const [pocetNaPaletu, setPocetNaPaletu] = useState('');
  const [celkovyPocetKusu, setCelkovyPocetKusu] = useState('');
  const [output, setOutput] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);

  const handleSubmit = () => {
    const parsedCisloPolozky = parseInt(cisloPolozky);
    const parsedPocetVKartonu = parseInt(pocetVKartonu);
    const parsedPocetNaPaletu = parseInt(pocetNaPaletu);
    const parsedCelkovyPocetKusu = parseInt(celkovyPocetKusu);

    if (
      isNaN(parsedCisloPolozky) ||
      isNaN(parsedPocetVKartonu) ||
      isNaN(parsedCelkovyPocetKusu) ||
      (parsedPocetNaPaletu && parsedPocetNaPaletu % parsedPocetVKartonu !== 0)
    ) {
      Alert.alert(
        'Chyba',
        'Zadejte platné číselné hodnoty a ujistěte se, že počet kusů na paletu je dělitelný počtem kusů v jednom kartonu.'
      );
      return;
    }

    const result = vypocetPaletAKartonu(parsedCisloPolozky, parsedPocetVKartonu, parsedPocetNaPaletu, parsedCelkovyPocetKusu);
    setOutput(result);
  };
  const handleClear = () => {
    setCisloPolozky('');
    setPocetVKartonu('');
    setPocetNaPaletu('');
    setCelkovyPocetKusu('');
    setOutput(null);
  };

  const vypocetPaletAKartonu = (cislo_polozky, pocet_v_kartonu, pocet_na_paletu, celkovy_pocet_kusu) => {
    let pocet_kartonu_na_paletu = pocet_na_paletu ? Math.floor(pocet_na_paletu / pocet_v_kartonu) : null;
    let celkovy_pocet_palet = pocet_na_paletu ? Math.floor(celkovy_pocet_kusu / pocet_na_paletu) : null;
    let zbytek_kartonu = pocet_na_paletu ? Math.ceil((celkovy_pocet_kusu % pocet_na_paletu) / pocet_v_kartonu) : null; // opraveno Math.floor na Math.ceil
    let zbytek_kusu = celkovy_pocet_kusu % pocet_na_paletu;
    let celkovy_pocet_kusu_na_paletach = celkovy_pocet_palet ? celkovy_pocet_palet * pocet_na_paletu : null;
    let celkovy_pocet_kartonu = Math.ceil(celkovy_pocet_kusu / pocet_v_kartonu);

    return {
      cisloPolozky: cislo_polozky,
      pocetVKartonu: pocet_v_kartonu,
      pocetNaPaletu: pocet_na_paletu,
      pocetKartonuNaPaletu: pocet_kartonu_na_paletu,
      celkovyPocetPalet: celkovy_pocet_palet,
      zbytekKusu: zbytek_kusu,
      zbytekKartonu: zbytek_kartonu,
      neuplnyPosledniKarton: celkovy_pocet_kusu % pocet_v_kartonu,
      celkovyPocetKartonu: celkovy_pocet_kartonu,
    };
  };
  const sklonovani = (cislo, slovo) => {
    if (cislo === 1) {
      return slovo;
    } else if (cislo >= 2 && cislo <= 4) {
      return slovo + 'y';
    } else {
      return slovo + 'ů';
    }
  };
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Příjemka</Text>
      <View>
        <Text style={styles.label}>Číslo položky:</Text>
        <TextInput
          style={[styles.input, focusedInput === 'cisloPolozky' && styles.focusedInput, styles.specialInput]}
          keyboardType="numeric"
          value={cisloPolozky}
          onChangeText={setCisloPolozky}
          onFocus={() => setFocusedInput('cisloPolozky')}
          onBlur={() => setFocusedInput(null)}
        />
        <Text style={styles.label}>Počet kusů v jednom kartonu:</Text>
        <TextInput
          style={[styles.input, focusedInput === 'pocetVKartonu' && styles.focusedInput]}
          keyboardType="numeric"
          value={pocetVKartonu}
          onChangeText={setPocetVKartonu}
          onFocus={() => setFocusedInput('pocetVKartonu')}
          onBlur={() => setFocusedInput(null)}
        />
        <Text style={styles.label}>Počet kusů na jedné paletě:</Text>
        <TextInput
          style={[styles.input, focusedInput === 'pocetNaPaletu' && styles.focusedInput]}
          keyboardType="numeric"
          value={pocetNaPaletu}
          onChangeText={setPocetNaPaletu}
          onFocus={() => setFocusedInput('pocetNaPaletu')}
          onBlur={() => setFocusedInput(null)}
        />
        <Text style={styles.label}>Celkový počet kusů:</Text>
        <TextInput
          style={[styles.input, focusedInput === 'celkovyPocetKusu' && styles.focusedInput]}
          keyboardType="numeric"
          value={celkovyPocetKusu}
          onChangeText={setCelkovyPocetKusu}
          onFocus={() => setFocusedInput('celkovyPocetKusu')}
          onBlur={() => setFocusedInput(null)}
        />
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={[styles.button, { backgroundColor: '#4caf50' }]} onPress={handleSubmit}>
            <Text style={styles.buttonText}>Vypočítat</Text>
          </TouchableOpacity>
          <TouchableOpacity style={[styles.button, { backgroundColor: '#2196f3' }]} onPress={handleClear}>
            <Text style={styles.buttonText}>Vymazat</Text>
          </TouchableOpacity>
        </View>
      </View>
      {output && (
        <View style={styles.result}>
          {output.pocetNaPaletu ? (
            <>
              <Text style={styles.resultItem}>
                <Text style={styles.resultTitle}>Číslo položky:</Text> <Text style={[styles.number, { fontSize: 18 }]}>{output.cisloPolozky}</Text>
              </Text>
              <Text style={styles.resultItem}>
                <Text style={styles.resultTitle}>Počet kusů na paletu:</Text> <Text style={[styles.number, { fontSize: 18 }]}>{output.pocetNaPaletu}</Text> <Text style={[styles.number, { fontSize: 18, color: '#000000', fontWeight: 'bold' }]}>{"("}</Text><Text style={[styles.number, { fontSize: 18, color: '#2196f3' }]}>{output.pocetKartonuNaPaletu}</Text> <Text style={{fontWeight: 'bold'}}>{sklonovani(output.pocetKartonuNaPaletu, 'karton')}</Text><Text style={[styles.number, { fontSize: 18, color: '#000000', fontWeight: 'bold' }]}>{")"}</Text>
              </Text>
              <Text style={styles.resultItem}>
                <Text style={styles.resultTitle}>Celkový počet palet:</Text> <Text style={[styles.number, { fontSize: 18 }]}>{output.celkovyPocetPalet}</Text>
              </Text>
              <Text style={styles.resultItem}>
                <Text style={styles.resultTitle}>Zbytek kusů:</Text> <Text style={[styles.number, { fontSize: 18 }]}>{output.zbytekKusu}</Text> <Text style={[styles.number, { fontSize: 18, color: '#000000', fontWeight: 'bold' }]}>{"("}</Text><Text style={[styles.number, { fontSize: 18, color: '#2196f3' }]}>{output.zbytekKartonu}</Text> <Text style={{fontWeight: 'bold'}}>{sklonovani(output.zbytekKartonu, 'karton')}</Text><Text style={[styles.number, { fontSize: 18, color: '#000000', fontWeight: 'bold' }]}>{")"}</Text>
              </Text>
              {output.neuplnyPosledniKarton !== 0 && (
                <>
                  {/*<Text style={styles.resultItem}>
                    <Text style={styles.resultTitle}>Neúplný poslední karton:</Text> <Text style={[styles.number, { fontSize: 18 }]}>{output.neuplnyPosledniKarton}</Text> kusů
                  </Text>*/}
                  <Text style={styles.warning}>
                    {/*<Text style={styles.warningTitle}>Upozornění:</Text> V jednom kartonu je jiný počet kusů.*/}
                    <Text style={styles.warningTitle}>Upozornění:</Text> V jednom kartonu je <Text style={[styles.number, { fontSize: 18 }]}>{output.neuplnyPosledniKarton}</Text> {sklonovani(output.neuplnyPosledniKarton, 'kus')}.
                  </Text>
                </>
              )}
            </>
          ) : (
            <>
              <Text style={styles.resultItem}>
                <Text style={styles.resultTitle}>Číslo položky:</Text> <Text style={[styles.number, { fontSize: 18 }]}>{output.cisloPolozky}</Text>
              </Text>
              <Text style={styles.resultItem}>
                <Text style={styles.resultTitle}>Celkový počet kartonů:</Text> <Text style={[styles.number, { fontSize: 18, color: '#2196f3' }]}>{output.celkovyPocetKartonu}</Text>
              </Text>
              {output.neuplnyPosledniKarton !== 0 && (
                <>
                  {/*<Text style={styles.resultItem}>
                    <Text style={styles.resultTitle}>Neúplný poslední karton:</Text> <Text style={[styles.number, { fontSize: 18 }]}>{output.neuplnyPosledniKarton}</Text> kusů
                  </Text>*/}
                  <Text style={styles.warning}>
                    {/*<Text style={styles.warningTitle}>Upozornění:</Text> V jednom kartonu je jiný počet kusů.*/}
                    <Text style={styles.warningTitle}>Upozornění:</Text> V jednom kartonu je <Text style={[styles.number, { fontSize: 18 }]}>{output.neuplnyPosledniKarton}</Text> {sklonovani(output.neuplnyPosledniKarton, 'kus')}.
                  </Text>
                </>
              )}
            </>
          )}
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#333333',
    textAlign: 'center',
    marginBottom: 20,
  },
  label: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333333',
    marginBottom: 5,
  },
  input: {
    fontSize: 24,
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderWidth: 1,
    borderColor: '#cccccc',
    borderRadius: 4,
    marginBottom: 15,
    backgroundColor:'#ffffff'
},
focusedInput:{
borderColor:'#4caf50'
},
specialInput:{
borderColor:'#0000ff', // modrá barva
backgroundColor:'#00ffff' // azurová barva
},
buttonContainer:{
flexDirection:'row',
justifyContent:'space-between'
},
button:{
flex :1,
marginHorizontal :5,
paddingHorizontal :20,
paddingVertical :10,
borderRadius :4,
backgroundColor:'#4caf50'
},
buttonText:{
fontSize :20,
color:'#ffffff',
textAlign:'center'
},
result:{
marginTop :20,
padding :10,
backgroundColor:'rgba(255,255,255,0.8)',
borderRadius :5
},
resultTitle:{
fontWeight:'bold'
},
resultItem:{
marginBottom :5
},
number:{
color:'#4caf50',
fontWeight:'bold'
},
warning:{
marginTop :20,
fontSize :18,
color:'red',
fontWeight:'bold'
},
warningTitle:{
fontWeight:'bold'
}
});

export default App; // konec kódu

1) Přidat malé modré tlačítko historie na hlavní obrazovku,dolů pod výsledek, které by přešlo na obrazovku s historií výpočtů.

2) Přidat obrazovku s historií výpočtů, kde by se zobrazovala tabulka nebo seznam s čísly položek. Po kliknutí na nějaké číslo by se zobrazil detail o výpočtu té položky.

3) Přidat možnost filtrovat, řadit, mazat nebo upravovat uložené výpočty na obrazovce s historií.

4) Přidat lupu pro vyhledávání v historii podle čísla položky nebo jiných kritérií.

5) moderní a přehledné prostředí historie
