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



export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { x: '' }
    this.onPress = this.onPress.bind(this)
  }

  onPress = (param) => {
    // alert(param)
    var wartosc = this.state.x
    switch (param) {
      case 1:
        wartosc = wartosc + "1"
        break
      case 2:
        wartosc = wartosc + "2"
        break
      case 3:
        wartosc = wartosc + "3"
        break
      case 4:
        wartosc = wartosc + "4"
        break
      case 5:
        wartosc = wartosc + "5"
        break
      case 6:
        wartosc = wartosc + "6"
        break
      case 7:
        wartosc = wartosc + "7"
        break
      case 8:
        wartosc = wartosc + "8"
        break
      case 9:
        wartosc = wartosc + "9"
        break
      case 0:
        wartosc = wartosc + "0"
        break
      case "+":
        if (wartosc[wartosc.length - 1] == '+' || wartosc[wartosc.length - 1] == '/')
          wartosc[wartosc.length - 1] = '+'
        else
          wartosc = wartosc + "+"
        break
      case "/":
        if (wartosc[wartosc.length - 1] == '/')
          break
        wartosc = wartosc + "/"
        break
      case "C":
        wartosc = ""
        break
      case "-":
      wartosc = wartosc + "-"
      break
      case "*":
      wartosc = wartosc + "*"
      break
      case "=":
      wartosc = wartosc + "=" + eval(wartosc)
      break

    }
    this.setState({ x: wartosc })


  }
  render() {
    console.log("App") // tą konsolę zobacz w przeglądarce
    return (
      <View style={[styles.container, styles.horizontal]}>
        <View style={{ flex: 1, backgroundColor: "aqua" }}><Text style={styles.czcionka1}>{this.state.x}</Text>

        </View>

        <View style={{ flex: 2, flexDirection: "row" }}>
          <View style={{ flex: 3, backgroundColor: "darkslategrey", flexDirection: "row", flexWrap: "wrap" }}>
            <TouchableOpacity onPress={() => this.onPress(1)} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>1</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress(2)} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>2</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress(3)} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>3</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress(4)} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>4</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress(5)} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>5</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress(6)} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>6</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress(7)} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>7</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress(8)} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>8</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress(9)} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>9</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress(".")} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>.</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress(0)} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>0</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress("=")} style={{ flexDirection: 'column', height: "25%", width: "33.33%", justifyContent: "center" }}><View><Text style={styles.czcionka}>=</Text></View></TouchableOpacity>

          </View>
          <View style={{ flex: 1, backgroundColor: "silver" }}>
            <TouchableOpacity onPress={() => this.onPress("C")} style={{ flex: 1, justifyContent: "center" }}><View><Text style={styles.czcionka}>C</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress("/")} style={{ flex: 1, justifyContent: "center" }}><View><Text style={styles.czcionka}>/</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress("*")} style={{ flex: 1, justifyContent: "center" }}><View><Text style={styles.czcionka}>*</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress("-")} style={{ flex: 1, justifyContent: "center" }}><View><Text style={styles.czcionka}>-</Text></View></TouchableOpacity>
            <TouchableOpacity onPress={() => this.onPress("+")} style={{ flex: 1, justifyContent: "center" }}><View><Text style={styles.czcionka}>+</Text></View></TouchableOpacity>

          </View>

        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",

  },
  horizontal: {
    flexDirection: "column",
    justifyContent: "space-around",

  },
  czcionka: {
    fontSize: 25, color: "white", textAlign: "center",
  },
  czcionka1: {
    fontSize: 50, color: "white", position:"absolute", bottom:0, right:0
  },

});