/** @jsx createElement */
import { Component, createElement, render } from 'rax';
import Text from 'nuke-text';
import View from 'nuke-view';
import Swipe from 'nuke-swipe';

class SwipeDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      direction: '',
      distance: 0,
      velocity: 0,
    };
  }
  onSwipeBegin({ direction, distance, velocity }) {
    console.log('begin', direction, distance, velocity);
  }

  onSwipe() {
    console.log('swipe');
  }

  onSwipeEnd({ direction, distance, velocity }) {
    console.log('end', direction, distance, velocity);
    this.setState({
      direction,
      distance,
      velocity,
    });
  }
  render() {
    return (
      <View>
        <Swipe
          style={styles.swipeWrap}
          onSwipeBegin={this.onSwipeBegin.bind(this)}
          onSwipe={this.onSwipe.bind(this)}
          onSwipeEnd={this.onSwipeEnd.bind(this)}
        >
          <Text style={styles.text}>direction: {this.state.direction}</Text>
          <Text style={styles.text}>distance: {this.state.distance}</Text>
          <Text style={styles.text}>velocity: {this.state.velocity}</Text>
        </Swipe>
      </View>
    );
  }
}
const styles = {
  swipeWrap: {
    height: 1000,
    backgroundColor: '#3089dc',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#ffffff',
    fontSize: 28,
  },
};
render(<SwipeDemo />);