/** @jsx createElement */
import { createElement, Component, findDOMNode, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Image from 'nuke-image';
import { isWeex, isWeb } from 'nuke-env';
import Transition from 'nuke-transition';
import Button from 'nuke-button';
import ScrollView from 'nuke-scroll-view';


const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      scale: true,
      translate: true,
      rotate: true,
      opacity: true,
      height: false,
      showOverlay: false,
    };
  }
    transition=(styles, cb) => {
      const box = findDOMNode(this.refs.box);
      Transition(box, styles, {
        timingFunction: 'linear',
        delay: 0,
        duration: 500,
      }, function () {
        cb && cb.call(this);
      });
    }
    scale=() => {
      const styles = this.state.scale ? { transform: 'scale(1.5, 1.5)' } : { transform: 'scale(1, 1)' };

      this.transition(styles, () => {
        this.setState({ scale: !this.state.scale });
      });
    }
    translate=() => {
      const styles = this.state.translate ? { transform: 'translate(150,150)' } : { transform: 'translate(0, 0)' };


      this.transition(styles, () => {
        this.setState({ translate: !this.state.translate });
      });
    }
    rotate=() => {
      const styles = this.state.rotate ? { transform: 'rotate(720deg)' } : { transform: 'rotate(0)' };

      this.transition(styles, () => {
        this.setState({ rotate: !this.state.rotate });
      });
    }
    opacity=() => {
      const styles = this.state.opacity ? { opacity: '0.5' } : { opacity: '1' };

      this.transition(styles, () => {
        this.setState({ opacity: !this.state.opacity });
      });
    }
    overlay=() => {
      const styles = this.state.showOverlay ? { opacity: '0', bottom: '-700rem' } : { opacity: '1', bottom: '0' };
      const box = findDOMNode(this.refs.overlay);
      Transition(box, styles, {
        timingFunction: 'linear',
        delay: 0,
        duration: 500,
      }, () => {
        this.setState({ showOverlay: !this.state.showOverlay });
      });
    }
    height=() => {
      const styles = this.state.height ? { height: '40rem' } : { height: '500rem' };
      const box = findDOMNode(this.refs.height);
      Transition(box, styles, {
        timingFunction: 'linear',
        delay: 0,
        duration: 500,
        needLayout: true,
      }, () => {
        this.setState({ height: !this.state.height });
      });
    }

    render() {
      return (
        <ScrollView>
          <View style={styles.st}><Text style={styles.stText}>基础用法</Text></View>
          <View style={styles.wrapper}>
            <View ref="box" style={styles.box}>
              <Image style={styles.pic} source={{ uri: 'https://img.alicdn.com/tfs/TB1gaj.PXXXXXaHaXXXXXXXXXXX-200-200.png' }} />
            </View>
          </View>
          <Button.Group style={styles.btnblock}>
            <Button type="primary" onPress={this.scale.bind(this)}>缩放</Button>
            <Button type="primary" onPress={this.translate.bind(this)}>变换</Button>
            <Button type="primary" onPress={this.rotate.bind(this)}>旋转</Button>
            <Button type="primary" onPress={this.opacity.bind(this)}>透明度</Button>
          </Button.Group>
          <Button style={{ marginTop: '20rem', marginBottom: '20rem' }} type="primary" onPress={this.height.bind(this)}>高度变化</Button>
          <View ref="height" style={[styles.height]}><Text>内容区</Text></View>
        </ScrollView>

      );
    }
};
const styles = {
  wrapper: {
    height: '600rem',
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: '#cccccc',
    alignItems: 'center',
    margin: '20rem',
    justifyContent: 'center',
  },

  box: {
    width: '200rem',
    height: '200rem',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#3089dc',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: '100rem',
  },
  pic: {
    width: '160rem',
    height: '160rem',
  },
  st: {
    marginTop: '30rem',
    marginBottom: '30rem',
    paddingTop: '10rem',
    paddingBottom: '10rem',
    paddingLeft: '20rem',
    backgroundColor: '#dddddd',
  },
  stText: {
    fontSize: '36rem',
  },
  btn: {
    marginRight: '20rem',
  },
  btnblock: {
    marginTop: '20rem',
  },
  height: {
    width: '750rem',
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    // display:'none',
    backgroundColor: '#dddddd',

  },
};
render(<App />);