/** @jsx createElement */
import { Component, createElement, render } from 'rax';
import Text from 'nuke-text';
import View from 'nuke-view';
import Swipe from 'nuke-swipe';
<<<<<<< HEAD
import Page from 'nuke-page';
=======
import BizPage from 'nuke-page';
>>>>>>> 725a9adbb9ea23bdb3a54477a26521fa7c8ebc64

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: direction,
      distance: distance,
      velocity: 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 />);