'use strict';

import {createElement, Component, render, findDOMNode} from 'rax';
import {Link, View, Text, Input, TextInput, ScrollView, Button, Transition} from 'nuke';
import QN from 'QAP-SDK';

class QAPKeyboardDemo extends Component {
    constructor(props) {
        super(props);

        this.state = {'viewBottom':'0'};

        QN.navigator.setTitle({
            query:{
                title: 'QAP键盘实践'
            }
        });

        QN.on('Global.KeyboardWillShow', (data) => {
            console.log('Global.KeyboardWillShow data : ', data);
            this.setState({viewBottom:data.height});

            // var orangeView = findDOMNode('orangeView');
            // console.log('orangeView : ', orangeView);
            // Transition(orangeView, {'transform':'translateY(-600)'}, {
            //     timingFunction: 'linear',
            //     delay: 0,
            //     duration: data.duration
            // }, function() {
            //     console.log('Transition done.');
            // });
        });

        QN.on('Global.KeyboardWillHide', (data) => {
            console.log('Global.KeyboardWillHide data : ', data);
            this.setState({viewBottom:data.height});
        });

        QN.on('Global.KeyboardWillChangeFrame', (data) => {
            console.log('Global.KeyboardWillChangeFrame data : ', data);
            this.setState({viewBottom:data.height});
        });
    }
    
    render() {
        return (
            <ScrollView style={styles.container} onScroll={this.hideKeyboard}>
                <TextInput 
                    ref='TextInput1' onInput={this.onInput}
                    style={styles.textInput} 
                    placeholder="请输入1" 
                    multiple={true}
                    value={this.state.inputValue}>
                </TextInput>
                <View id='orangeView' style={{backgroundColor:'orange', height:'100rem', position:'fixed', bottom:this.state.viewBottom}}>跟随键盘移动</View>
            </ScrollView>
        );
    }
}

const styles = {
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
    },

    textInput: {
        borderStyle: 'solid',
        borderColor: 'lightblue',
        borderWidth: '1rem',
        width: '600rem',
        height: '200rem',
        'margin':'40rem'
    },
}

render(<QAPKeyboardDemo/>)

export default QAPKeyboardDemo;