'use strict';

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

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      index: 2,
    };
  }

    sliderChange = (e) => {
      console.log(e);
    }
    btnClick(index) {
      this.refs.Slider.slideTo(index);
    }
    render() {
      return (
        <Page title="slider">
          <Page.Intro main="普通" />
          <Slider
            ref="Slider"
            width="750rem"
            height="400rem"
            autoplay={false}
            showsPagination
            loop
            index={0}
            autoplayTimeout="3000"
            paginationStyle={styles.paginationStyle}
            onChange={this.sliderChange}
          >
            <View style={[styles.item, styles.step1]}><Text style={styles.text}>Page 1</Text></View>
            <View style={[styles.item, styles.step2]}><Text style={styles.text}>Page 2</Text></View>
            <View style={[styles.item, styles.step3]}><Text style={styles.text}>Page 3</Text></View>
          </Slider>
          <View style={styles.btns}>
            <Button style={styles.btn} block type="primary" onPress={this.btnClick.bind(this, 0)}>切换到第 1 个</Button>
            <Button style={styles.btn} block type="primary" onPress={this.btnClick.bind(this, 1)}>切换到第 2 个</Button>
            <Button style={styles.btn} block type="primary" onPress={this.btnClick.bind(this, 2)}>切换到第 3 个</Button>
          </View>
        </Page>
      );
    }
};
const styles = {
  item: {
    width: '750rem',
    height: '400rem',
    justifyContent: 'center',
    alignItems: 'center',
  },
  step1: {

    backgroundColor: '#1170bc',
  },
  step2: {
    backgroundColor: '#ff6600',
  },
  step3: {
    backgroundColor: '#cccccc',
  },
  paginationStyle: {
    position: 'absolute',
    width: '690rem',
    height: '100rem',
    left: '20rem',
    color: 'rgba(255, 255, 255 ,0.5)',
    itemColor: '#ffffff',
    itemSelectedColor: '#f1f1f1',
  },
  btns: {
    margin: '30rem',
  },
  btn: {
    marginBottom: '30rem',
  },
  text: {
    fontSize: '26rem',
    color: '#ffffff',
  },
};
render(<App />);