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

const slideStyle = {
  step1: {
    width: '750rem',
    height: '400rem',
    backgroundColor: 'green',
    color: '#ffffff',
  },

  step2: {
    width: '750rem',
    height: '400rem',
    backgroundColor: '#31363f',
    color: '#ffffff',
  },

  step3: {
    width: '750rem',
    height: '400rem',
    backgroundColor: '#528bff',
    color: '#ffffff',
  },
  paginationStyle: {
    position: 'absolute',
    width: '690rem',
    height: '100rem',
    top: '240rem',
    left: '20rem',
    color: 'rgba(255, 255, 255 ,0.5)',
  },
};
const App = class NukeDemoIndex extends Component {
  constructor(props) {
    super(props);
    this.accuracyStyle = {
      position: 'relative',
      width: 100,
      height: 20,
      backgroundColor: 'red',
      marginLeft: 0,
    };
    this.state = {
      accuracyStyle: this.accuracyStyle,
    };
  }
  sliderChange(e) {

  }
  scrollHandler(e) {
    const tempStyle = Object.assign({}, this.accuracyStyle);
    tempStyle.marginLeft = -e.offsetXRatio * 750;
    this.setState({
      accuracyStyle: tempStyle,
    });
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={this.state.accuracyStyle} />
        <Slider
          width="750rem"
          height="600rem"
          autoplay={false}
          showsPagination={false}
          loop={false}
          index={0}
          accuracy="0.1"
          autoplayTimeout="3000"
          onChange={this.sliderChange.bind(this)}
          onScroll={this.scrollHandler.bind(this)}
        >
          <View style={slideStyle.step1}><Text>step1</Text></View>
          <View style={slideStyle.step2}><Text>step2</Text></View>
          <View style={slideStyle.step3}><Text>step3</Text></View>
        </Slider>
        <Text>{this.state.accuracyStyle.marginLeft}</Text>
      </View>
    );
  }
};

render(<App />);