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

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            items: [],
            kredit: 0,
            jegy: 0,
            id:0,
            kreditindex: '0.00',
            felvettkredit: 0,
            atlag: '0.00',
            isAlertedOne: false,
            isAlertedScrollDown: false,
        }
        this.jegyChange.bind(this);
        this.kreditChange.bind(this);
    }

    componentDidMount() {
        for (let i=1; i<=5; i++) {
            this.state.items.push({
                id: i,
                kredit: '0',
                jegy: '0',
            })
        }
        this.setState( { id: this.state.items.length})
        this.setState({ items: this.state.items })
    }

    render() {

            let items = this.state.items.map(item => {
            return <View style={ styles.container } key={item.id}>
                <Text style={ styles.number }>{item.id}</Text>
                <TextInput name="kredit" placeholder="Kreditérték" keyboardType="number-pad" style={ styles.input } onChangeText={(kredit) => this.kreditChange(kredit, item.id) }></TextInput>
                <TextInput name="jegy" placeholder="Jegy" keyboardType="number-pad" style={ styles.input } onChangeText={(jegy) => this.jegyChange(jegy, item.id)}></TextInput>
            </View>
            })

        return(
            <View style={styles.main} >
                <Text style={{ textAlign: 'center', fontSize: 30, color: 'black' }}>Kreditindex kalkulátor</Text>
                <ScrollView style={styles.adatok}>
                    {items}
                </ScrollView>
                <View style={styles.buttons}>
                <TouchableOpacity style={styles.countButton}>
                    <Text style={styles.countButtonText} onPress={this.calc.bind(this)}>Számol</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.plusOne} onPress={this.addItem.bind(this)}>
                    <Text style={styles.plusOneText}>Plusz egy tárgy</Text>
                </TouchableOpacity>
                </View>
                <View style={styles.kreditindex}>
                    <Text style={styles.kreditindexText}>Kreditindex: {this.state.kreditindex}</Text>
                </View>
                <View style={styles.felvettkredit}>
                    <Text style={styles.felvettkreditText}>Felvett kredit: {this.state.felvettkredit}</Text>
                </View>
                <View style={styles.atlag}>
                    <Text style={styles.atlagText}>Átlag: {this.state.atlag}</Text>
                </View>

            </View>
        );
    }

    addItem() {
        let id = this.state.id+1;
        this.state.items.push({
            id: id,
            kredit: '0',
            jegy: '0',
        })
        this.setState( { id: id})
        this.setState({ items: this.state.items })
        if (!this.isAlertedScrollDown) {
            this.scrollDownAlert();
            this.isAlertedScrollDown = !this.isAlertedScrollDown;
            this.setState({ isAlertedScrollDown: this.isAlertedScrollDown })
        }
        Keyboard.dismiss();
    }
    jegyChange(jegy, id) {
        this.state.items[id-1].jegy = jegy;
        this.setState({ items: this.state.items })

    }
    kreditChange(kredit, id) {
        this.state.items[id-1].kredit = kredit;
        this.setState({ items: this.state.items })
    }
    calc() {
        var ki = 0.00;
        this.state.kreditindex = this.state.items.map(item => {
            if (item.jegy == 1 && !this.isAlertedOne) {
                this.oneAlert();
                this.isAlertedOne = !this.isAlertedOne;
                this.setState({ isAlerted: this.isAlertedOne })
            }
            if (item.jegy != 1) {
                ki += item.jegy * item.kredit;
            }
        })
        this.state.kreditindex = ki/30;
        this.state.kreditindex = Number(this.state.kreditindex).toFixed(2);
        this.setState({ kreditindex: this.state.kreditindex })
        var fk = 0;
        this.state.felvettkredit = this.state.items.map(item => {
            fk += Number(item.kredit);
        })
        this.setState({ felvettkredit: fk })
        var atlag = '0.00';
        var nevezo = 0;
        var szamlalo = 0;
        this.state.atlag = this.state.items.map(item => {
            if (item.jegy != 0) {
                nevezo += 1;
                szamlalo += Number(item.jegy);
            }
        })
        if (nevezo != 0 && szamlalo != 0) {
        var atlag = (szamlalo/nevezo).toFixed(2);
        }
        this.setState({ atlag: atlag });
        Keyboard.dismiss();
    }
    oneAlert() {
        Alert.alert(
            'Figyelmeztetés',
            'Egy vagy több tantárgyból egyes jegy lett beírva, ezért ezek nem lesznek beleszámítva a kreditindexbe.',
            [
              {text: 'OK'},
            ],
            {cancelable: false},
          );
    }
    scrollDownAlert() {
        Alert.alert(
            'Segítség',
            'Görgess lefelé a beviteli mezőben, hogy lásd a hozzáadott tárgyakat.',
            [
              {text: 'OK'},
            ],
            {cancelable: false},
          );
    }
}

const styles = StyleSheet.create({
    main: {
        backgroundColor: '#fbfaf6',
    },
    adatok: {
        backgroundColor: '#ebece4',
        height: '53%',
    },
    countButton: {
        backgroundColor: '#28A745',
        marginLeft: 35,
        width: 60,
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 8,
    },
    countButtonText: {
        color: 'white',
    },
    plusOneText: {
        color: 'white',
    },
    plusOne: {
        backgroundColor: '#007BFF',
        marginLeft: 25,
        width: 110,
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 8,
    },
    buttons: {
        paddingTop: 15,
        flexDirection: 'row',
        backgroundColor: '#ebece4',
        paddingBottom: 15,
    },
    container: {
        marginTop: 5,
        justifyContent: 'space-around',
        flexDirection: 'row',
        width: '100%',
    },
    number: {
        fontSize: 14,
        height: 40,
        marginTop: 27,
        marginLeft: 15,
    },
    input: {
        marginLeft: 15,
        marginRight: 15,
        marginTop: 20,
        paddingTop: 0,
        paddingBottom: 0,
        height: 30,
        width: 100,
        borderColor: 'black',
        textAlign: 'center',
        borderWidth: 1,
        backgroundColor: 'white',
    },
    kreditindex: {
        backgroundColor: '#9BC08B',
    },
    kreditindexText: {
        fontSize: 24,
        marginLeft: 10,
        color: 'black',
    },
    felvettkredit: {
        backgroundColor: '#F7AF7E'
    },
    felvettkreditText: {
        fontSize: 24,
        marginLeft: 10,
        color: 'black',
    },
    atlag: {
        backgroundColor: '#F58C88',
    },
    atlagText: {
        fontSize: 24,
        marginLeft: 10,
        color: 'black',
    }
})