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

export default class ComponentePorcentagem extends React.Component {
  state = {
    counter: 0
  };

  changeCounter = operation => {
    let { counter } = this.state;
    operation ? (counter += 1) : (counter -= 1);
    this.setState({
      counter
    });
  };

  render() {
    const { counter } = this.state;
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Counter</Text>
        <View style={styles.containerCounter}>
          <Text style={styles.counter}>{counter}</Text>
        </View>
        <View style={styles.containerBtnRow}>
          <TouchableOpacity onPress={() => this.changeCounter()}>
            <View style={styles.containerBtn}>
              <Text style={styles.textBtn}>Subtract</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.changeCounter(true)}>
            <View style={styles.containerBtn}>
              <Text style={styles.textBtn}>Add</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: "60%",
    width: "80%",
    margin: 20,
    borderColor: "#ccc",
    borderWidth: 1,
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center"
  },
  containerCounter: {
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    padding: 20,
    width: 80,
    backgroundColor: "red"
  },
  containerBtnRow: {
    flexDirection: "row",
    justifyContent: "space-around",
    width: "100%",
    padding: 10
  },
  containerBtn: {
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 20,
    padding: 10,
    backgroundColor: "blue",
    width: 100
  },
  textBtn: {
    fontSize: 18,
    color: "white",
    fontWeight: "700"
  },
  title: {
    fontSize: 20,
    fontWeight: "700",
    marginBottom: 20
  },
  counter: {
    fontSize: 20,
    color: "white",
    fontWeight: "700"
  }
});