import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import Tea from "./Tea";

//The component's state
interface Model {
  count: number;
}

//The Actions that this component creates
type Message = "increment" | "decrement";

//The component's Props
type Props = { start?: number };

class Counter extends Tea<Props, Message, Model> {
  constructor(props: Props) {
    const start = props.start || 0;
    //initialize the model from props if defined
    super(props, { count: start });
  }

  //reducing over the stream of incoming messages
  //exhaustive matching guaranteed by compiler
  update(msg: Message, model: Model): Model {
    switch (msg) {
      case "increment":
        return { count: model.count + 1 };
      case "decrement":
        return { count: model.count - 1 };
    }
  }

  //given a Model, return JSX
  view(m: Model) {
    return (
      <View style={styles.counter}>
        <Button title="decrement" onPress={() => this.onMsg("decrement")} />
        <Text>{this.state.count}</Text>
        <Button title="increment" onPress={() => this.onMsg("increment")} />
      </View>
    );
  }
}