'use strict'
/**
 * 发帖页
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    TextInput,
    Image,
    Platform,
    Dimensions,
    Text,
    TouchableOpacity,
    Keyboard,
    Animated,
    Easing,
    ScrollView,
    NativeModules,
} from 'react-native'

import AssertsPicker from './AssertsPicker';

let dismissKeyboard = require('dismissKeyboard');
let YH_CommunityAssetsPicker = NativeModules.YH_CommunityAssetsPicker;

export default class Posting extends Component {
    constructor(props) {
        super(props);
        this.titleLength=0;
        this.contentLength=0;
        this.blurAll = this.blurAll.bind(this);
        this.showBoardPannel = this.showBoardPannel.bind(this);
        this.boardInView=false;
        this.boardHeight=257;
        this.boardSelectionHeight = 257;
        this.renderSelector = this.renderSelector.bind(this);
        this.showImagePannel = this.showImagePannel.bind(this);
        this.renderCountText = this.renderCountText.bind(this);
        this.state = {
            contentInputHeight: new Animated.Value(0),
            boardState: 0,
            imageState: 0,
        }
    }

    componentDidMount(){
        this.setState({contentInputHeight: new Animated.Value(height-navbarHeight-44-0.5-41)});
        Keyboard.addListener('keyboardWillChangeFrame',(event)=>{

            if (this.boardInView) {
                return;
            }

            let kbdHeight = height - event.endCoordinates.screenY;
            this.boardHeight = kbdHeight>0?kbdHeight:250;
            this.boardSelectionHeight=kbdHeight;
            let targetHeight = height-navbarHeight-44-0.5-41- kbdHeight;
            this.stretchContentInputToHeight(targetHeight, event.duration);
        });
    }

    stretchContentInputToHeight(newHeight, anmDuration) {
        Animated.timing(this.state.contentInputHeight, {
            toValue: newHeight,
            duration:anmDuration,
            easing:Easing.keyboard,
        }).start();
    }

    blurAll() {
        this.setState({boardState:0,imageState:0});
        if (this.boardInView) {
            this.boardInView = false;
            let targetHeight = height-navbarHeight-44-0.5-41;
            this.stretchContentInputToHeight(targetHeight, 250);
        }
        dismissKeyboard();
    }

    showBoardPannel() {
        this.boardInView= true;

        this.setState({boardState:this.boardSelectionHeight,imageState:0});
        dismissKeyboard();

        let targetHeight = height-navbarHeight-44-0.5-41- this.boardHeight;
        this.stretchContentInputToHeight(targetHeight, 250);
    }

    showImagePannel() {
        this.boardInView= true;

        this.setState({boardState:0,imageState:this.boardSelectionHeight});

        dismissKeyboard();


        let targetHeight = height-navbarHeight-44-0.5-41- this.boardHeight;
        this.stretchContentInputToHeight(targetHeight, 250);
    }

    renderSelector() {
        if (this.boardSelectorInview) {
            return(
                <View style={styles.boardSelectionScroll}>
                    {this.props.boards.map((item,i)=>{
                            return(
                                <Text
                                    style={styles.boardSelectionItem}
                                    onPress={event=>{
                                            this.props.onBoardPress(item.forumName);
                                            this.blurAll();
                                        }
                                    }
                                >
                                    {item.forumName}
                                </Text>
                            );
                        }
                    )}
                </View>
            );
        }
        if (this.imageSelectorInView) {
            return (
                <View style={ {width:320, height:100 , backgroundColor:'red',} }/>
            );
        }
    }

    renderCountText(count) {
        if (count) {
            return (
                <Text style={styles.imageCountText}>{this.props.assets.length}</Text>
            );
        }
    }

    render() {
        return(
            <View style={styles.container}>
                <TextInput
                    style={styles.titleInput}
                    placeholderTextColor='#b0b0b0'
                    placeholder='标题（可选填）'
                    maxLength={30}
                    numberOfLines={1}
                    autoFocus={true}
                    onChangeText={
                        (text)=>{
                            this.titleLength = text.length;
                            this.props.titleEdited(text);
                        }
                    }
                    onKeyPress={
                        (event)=>{
                            if (this.titleLength>=30) {
                                console.log('满了');
                            }
                        }
                    }
                    value={this.props.titleValue}
                />
                <View style={styles.titleSeporator}/>
                <Animated.View
                    style={[styles.contentInputContainer,{height:this.state.contentInputHeight}]}
                >
                    <TextInput
                        style={styles.contentInput}
                        placeholder='用力敲出你想说的...'
                        maxLength={2000}
                        multiline={true}
                        onChangeText={
                            (text)=>{
                                this.contentLength = text.length;
                                this.props.contentEdited(text);
                            }
                        }
                        onKeyPress={
                            (event)=>{
                                if (this.contentLength>=2000) {
                                    console.log('满了');
                                }
                            }
                        }
                        value={this.props.contentValue}
                    />
                </Animated.View>

                <View style={styles.toolContainer}>
                    <TouchableOpacity style={styles.imgIcon} onPress={this.showImagePannel}>
                        <Image source={require('../../images/pic1.png')}/>
                        {this.renderCountText(this.props.assets.length)}
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.keyboardIcon} onPress={this.blurAll}>
                        <Image style={styles.keyboardIcon} source={require('../../images/jianpan1.png')} />
                    </TouchableOpacity>
                    <View style={styles.rightContainer}>
                        <Text
                        style={styles.boardText}
                        onPress={this.showBoardPannel}
                        >
                            {this.props.selectedBoard}
                        </Text>
                    </View>
                </View>
                <AssertsPicker
                    style={[styles.boardSelectionContainer,{height:this.state.imageState,}]}
                    opacityToHide={this.state.imageState}
                    assets={this.props.assets}
                    assetsSelected={this.props.assetsSelected}
                />

                <View style={[styles.boardSelectionContainer,{height:this.state.boardState,}]} opacity={this.state.boardState}>
                    <View style={styles.boardSelectionScroll}>
                        {this.props.boards.map((item,i)=>{
                                return(
                                    <Text
                                        key={i}
                                        style={styles.boardSelectionItem}
                                        onPress={event=>{
                                                this.props.onBoardPress(item.forumName,item.forumCode);
                                                // this.blurAll();
                                            }
                                        }
                                    >
                                        {item.forumName}
                                    </Text>
                                );
                            }
                        )}
                    </View>
                </View>
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;

const styles = StyleSheet.create({
    container: {
        top: 0,
        flex: 1,
    },
    titleInput: {
        left: 0,
        top:0,
        height:44,
        padding:15,
        color: 'black',
        fontSize: 15,
    },
    contentInputContainer: {
        left:0,
        top:0,
    },
    contentInput: {
        left:0,
        top:0,
        bottom:0,
        right:0,
        padding: 15,
        color: 'black',
        fontSize:15,
        flex:1,
    },
    titleSeporator: {
        left: 15,
        top:0,
        right:0,
        height:0.5,
        backgroundColor: '#a0a0a0',
    },
    boardSelectionContainer: {
        height: 250,
    },
    boardSelectionScroll: {
        flex:1,
        padding: 15,
        paddingTop:10,
        flexDirection:'row',
        flexWrap:'wrap',
        justifyContent:'space-between',
    },
    boardSelectionItem: {
        height: 21,
        paddingTop:3,
        width: (width-45)/3,
        borderColor: '#a0a0a0',
        marginBottom:10,
        backgroundColor:'#f2f2f2',
        borderWidth:0.5,
        fontSize: 14,
        textAlign: 'center',
        justifyContent:'space-between',
        flexWrap:'wrap',

    },
    toolContainer: {
        flexDirection: 'row',
        marginBottom:0,
        right:0,
        left:0,
        height: 41,
        borderColor: '#a0a0a0',
        borderBottomWidth:0.5,
        borderTopWidth:0.5,
        alignItems:'center',
        justifyContent: 'center',
    },
    imgIcon: {
        left:15,
        width:19,
        height:19,
        marginRight:29,
        flexDirection:'row',
    },
    keyboardIcon: {
        width:20,
        height:20,
    },
    rightContainer: {
        flexDirection: 'column',
        height:41,
        width:width-68,
        alignItems:'flex-end',
    },
    boardText: {
        backgroundColor: '#e0e0e0',
        height: 21,
        fontSize:14,
        textAlign: 'center',
        paddingLeft: 10,
        paddingRight:10,
        paddingTop: 3,
        marginRight:10,
        marginTop: 10,
        fontWeight:'100',
    },
    imageCountText: {
        width:15,
        height: 15,
        left:-8,
        top:-7,
        fontSize:9,
        color:'#d0021b',
        alignItems:'center',
        textAlign:'center',
        paddingTop:1.5,
        borderRadius:7.5,
        borderWidth:0.5,
        borderColor:'#d0021b',
    }
});