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

class SlideText extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      value: this.props.value,
      min: this.props.min,
      max: this.props.max,
      step: this.props.step,
    };
  }

  static defaultProps = {
    value: 3,
    min: 0,
    max: 5,
    step: 1,
  }

  onValueChange(value){
    this.setState({
      value: value,
    });
  }

  onSlidingComplete(value){
    alert(`Complete ${value}`);
  }

  render() {
    return (
      <View style={styles.container}>

        <Slider style={styles.onlyJustify}
        maximumValue={this.state.max}
        minimumValue={this.state.min}
        step={this.state.step}
        value = {this.state.value}
        onValueChange={(value) => {this.onValueChange(value)}}
        onSlidingComplete={(value) => {this.onSlidingComplete(value)}}/>

        <View style={[styles.container, styles.adjust]}>
          <Text>Hello from the other side</Text>
          <Text>{this.state.value}</Text>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
  },
  adjust: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  onlyJustify: {
    alignItems: 'center',
  }
});

export default SlideText;