import React, { Component } from 'react';
import sharedStyles from '../shared-styles';
import {
    TouchableHighlight,
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class WalkButton extends Component {
    constructor(props) {
        super(props);
        this.start = this.props.start;
        this.stop = this.props.stop;
        this.state = {
            value: this.props.value,
            activeWalk: false,  
            buttonText: "Start Capture",
            buttonColour: 'rgba(0,255,0,0.5)'
        };
    }
    
    formatValue() {
        return this.state.value;
    }

    render() {
        return (
            <View style ={[{paddingVertical: 15}, {flex: 1}]}>
            <TouchableHighlight
                onPress=  {() => {
                    if (this.state.activeWalk){
                        console.log("state true to false")
                        this.setState({
                            activeWalk: false,
                            buttonText: "Start Capture",
                            buttonColour: 'rgba(0,255,0,0.5)'
                        })
                        this.start();
                    }else{
                        console.log("state false to true")
                        this.setState({
                            activeWalk: true,
                            buttonText: "Stop Capture",
                            buttonColour: 'rgba(255,0,0,0.5)'
                        })
                        this.stop()
                    }}}
                // style={sharedStyles.new}
            >
                    <Text style={{
                        paddingVertical: 10,
                        fontSize: 30, 
                        backgroundColor: this.state.buttonColour,
                        textAlign: 'center'}}>{this.state.buttonText}</Text>
                    
            </TouchableHighlight>
            </View>

        )
    }
}