import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity, FlatList } from 'react-native';

import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const colorList = [
    { key: '1', value: 'blueviolet' },
    { key: '2', value: 'chartreuse' },
    { key: '3', value: 'cyan' },
    { key: '4', value: 'darggrey' },
    { key: '5', value: 'gold' },
    { key: '6', value: 'khaki' },
    { key: '7', value: 'lawngreen' },
    { key: '8', value: 'orange' },
    { key: '9', value: 'palevioletred' },
    { key: '10', value: 'yellow' },
];

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { clicks: 0, color: 'blue', changeBackgroundColor: 'green', changeBackgroundColorList: 'green'};
    }

    increase = this.increase.bind(this)
    decrease = this.decrease.bind(this)

    increase() {
        this.setState({ color: 'white' });
        this.setState(previousState => ({ clicks: previousState.clicks + 1 }));
    }

    decrease() {
        this.setState({ color: 'white' });
        this.setState(previousState => ({ clicks: previousState.clicks - 1 }));
    }

    onLongClick = this.onLongClick.bind(this);
    onClick = this.onClick.bind(this);

    onLongClick() {
        this.setState({ changeBackgroundColor: 'white'  });
    }

    onClick() {
        var randomColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        this.setState({ changeBackgroundColor: randomColor });
    }

    onClickList = this.onClickList.bind(this);

    onClickList() {
        this.setState({ changeBackgroundColorList: colorList[this.selectColor].value });
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text>{"\n"}</Text>
                    <Text style={styles.header}>Klikacz</Text>
                </View>
                <View style={{ flex: 3, justifyContent: 'center' }}>
                    <Text style={styles.counter}>Liczba klikniec: {this.state.clicks}</Text>
                    <Text>{"\n"}</Text>
                    <View style={styles.buttons}>
                        <Button title="Dodaj" onPress={this.increase} />
                        <Text>{"\t"}</Text>
                        <Button title="Odejmij" onPress={this.decrease} />
                    </View>
                </View>
                <View style={{ flex: 3, justifyContent: 'center', alignItems: 'center', backgroundColor: this.state.changeBackgroundColor }}>
                    <TouchableOpacity onPress={this.onClick} onLongPress={this.onLongClick}>
                        <Text>
                            <Text style={styles.changeText}>Zmien tlo</Text>
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={{ flex: 2, justifyContent: 'center', alignItems: 'center', backgroundColor: this.state.changeBackgroundColorList }}>
                    <FlatList
                        data={colorList}
                        renderItem={({ item }) =>
                            <Text style={styles.item} onPress={this.selectColor.bind(this, item)}>{item.value}</Text>}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    header: {
        fontSize: 36,
        fontWeight: 'bold',
        color: 'black',
        textAlign: 'center',
        alignItems: 'center',
        justifyContent: 'center',
    },
    counter: {
        fontSize: 24,
        fontWeight: 'bold',
        color: 'blue',
        textAlign: 'center',
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttons: {
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    changeBackground: {

    },
    changeTouchable: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red'
    },
    changeText: {
        fontSize: 24,
        fontWeight: 'bold',
        color: 'blue',
        textAlign: 'center'
    },
    item: {
        fontSize: 16,
        color: 'blue'
    }
});