import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { decrement, increment } from "../store/actions";

export const Counter = () => {
  const dispatch = useDispatch()
  const value = useSelector(s => s.test.value)

  return (
    <View style={[{ width: '75%' }]}>
      <Text style={[styles.textAlignCenter]}>{value}</Text>
      <View style={[styles.row, styles.justifySpaceBetween]}>
        <TouchableOpacity style={[styles.button, styles.justifyCenter]} onPress={() => dispatch(increment())}>
          <Text style={[styles.textAlignCenter]}>Increment</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.button, styles.justifyCenter]} onPress={() => dispatch(decrement())}>
          <Text style={[styles.textAlignCenter]}>Decrement</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
  },
  flex: {
    flex: 1
  },
  justifySpaceBetween: {
    justifyContent: 'space-between'
  },
  button: {
    backgroundColor: "#D9F1EC",
    padding: '3%',
    marginTop: '10%'
  },
  textAlignCenter: {
    textAlign: 'center'
  },
  justifyCenter: {
    justifyContent: 'center'
  },
  alignCenter: {
    alignItems: 'center'
  }
})