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

import PostingToolBar from './PostingToolBar';
import AssertsPicker from './AssertsPicker';
import SectionSelector from './SectionSelector';

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


let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;
let titleInputHeight = 44;
let titleSeporatorHeight = 0.5;
let toolBarHeight = 41;
let contentInputHeight = height - navbarHeight - titleInputHeight - titleSeporatorHeight - toolBarHeight;


export default class Posting extends Component {
    constructor(props) {
        super(props);

        this.defaultAnmDuration = 250;
        this.defaultKeyboardHeight = 250;
        this.keyboardHeight = 0,

        this.titleLength = 0;
        this.contentLength = 0;

        this.onPressBlurAll = this.onPressBlurAll.bind(this);
        this.onPressImagePicker = this.onPressImagePicker.bind(this);
        this.onPressSectionSelector = this.onPressSectionSelector.bind(this);

        this.state = {
            contentInputHeightValue: new Animated.Value(0),
            showImagePicker: false,
            showSectionSelector: false,
            showKeyboard: false,
        };
    }

    componentDidMount() {

        this.state.contentInputHeightValue.setValue(contentInputHeight);

        Keyboard.addListener('keyboardWillChangeFrame', (event) => {
            let kbdHeight = height - event.endCoordinates.screenY;

            // 键盘高度只获取一次，后面不再获取
            this.keyboardHeight = this.keyboardHeight == 0 ? kbdHeight : this.keyboardHeight;

            let contentInputHeightWhileFocusing = 0;

            if (this.state.showImagePicker || this.state.showSectionSelector) {
                // 显示图片选择和版块选择时，content text input的高度要减去键盘高度
                contentInputHeightWhileFocusing = contentInputHeight - this.keyboardHeight;
            } else {
                // 收起输入区时，content text input的高度要减去当前键盘高度
                contentInputHeightWhileFocusing = contentInputHeight - kbdHeight;
            }

            this.animatedContentInputToHeight(contentInputHeightWhileFocusing, event.duration);
        });

    }

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

    onPressBlurAll() {
        this.setState({
            showImagePicker: false,
            showSectionSelector: false,
            showKeyboard: false,
        });

        dismissKeyboard();

        this.animatedContentInputToHeight(contentInputHeight, this.defaultAnmDuration);
    }

    onPressImagePicker() {
        this.setState({
            showImagePicker: true,
            showSectionSelector: false,
            showKeyboard: false,
        });

        dismissKeyboard();

        let contentInputHeightWhileFocusing = contentInputHeight - this.keyboardHeight;
        this.animatedContentInputToHeight(contentInputHeightWhileFocusing, this.defaultAnmDuration);
    }

    onPressSectionSelector() {
        if (this.props.fromSection) {
            return;
        }

        this.setState({
            showImagePicker: false,
            showSectionSelector: true,
            showKeyboard: false,
        });

        dismissKeyboard();

        let contentInputHeightWhileFocusing = contentInputHeight - this.keyboardHeight;
        this.animatedContentInputToHeight(contentInputHeightWhileFocusing, this.defaultAnmDuration);
    }

    render() {
        return(
            <View style={styles.container}>
                <TextInput
                    style={styles.titleInput}
                    placeholderTextColor='#b0b0b0'
                    placeholder='标题（可选填）'
                    maxLength={30}
                    numberOfLines={1}
                    autoFocus={true}
                    autoCapitalize={'none'}
                    autoCorrect={false}
                    onFocus={() => {
                        this.setState({
                            showKeyboard: true,
                        });
                    }}
                    onChangeText={(text) => {
                        this.titleLength = text.length;
                        this.props.titleEdited(text);
                    }}
                    onKeyPress={(event) => {
                        if (this.titleLength >= 30) {
                            Alert.alert('抱歉','超出30字符最长限制');
                        }
                    }}
                    value={this.props.titleValue}
                />
                <View style={styles.titleSeporator}/>
                <Animated.View
                    style={[styles.contentInputContainer, {height: this.state.contentInputHeightValue}]}
                >
                    <TextInput
                        style={styles.contentInput}
                        placeholder='用力敲出你想说的...'
                        maxLength={2000}
                        multiline={true}
                        autoCorrect={false}
                        onFocus={() => {
                            this.setState({
                                showKeyboard: true,
                            });
                        }}
                        onChangeText={(text) => {
                            this.contentLength = text.length;
                            this.props.contentEdited(text);
                        }}
                        onKeyPress={(event) => {
                            if (this.contentLength >= 2000) {
                                Alert.alert('抱歉','超出2000字符最长限制');
                            }
                        }}
                        value={this.props.contentValue}
                    />
                </Animated.View>

                <PostingToolBar
                    imageCount={this.props.assets.length}
                    selectedSectionName={this.props.selectedBoard}
                    onPressImage={this.onPressImagePicker}
                    onPressTrigger={this.onPressBlurAll}
                    onPressSection={this.onPressSectionSelector}
                    imageInView={this.state.showImagePicker}
                    keyboardInView={this.state.showKeyboard}
                />

                <AssertsPicker
                    assets={this.props.assets}
                    hidden={!this.state.showImagePicker}
                    onSelectedAsset={this.props.assetsSelected}
                />

                <SectionSelector
                    sections={this.props.boards}
                    selectedSectionName={this.props.selectedBoard}
                    hidden={!this.state.showSectionSelector}
                    onPressSection={this.props.onBoardPress}
                    onPressBlurAll={this.onPressBlurAll}
                />
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        top: 0,
        flex: 1,
        backgroundColor: 'white',
    },
    titleInput: {
        left: 0,
        top: 0,
        height: titleInputHeight,
        padding: 14,
        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: titleSeporatorHeight,
        backgroundColor: '#a0a0a0',
    },
});