'use strict'
/**
 * 照片选择页面
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    TextInput,
    Image,
    Platform,
    Dimensions,
    Text,
    TouchableOpacity,
    Keyboard,
    Animated,
    Easing,
    ScrollView,
    NativeModules,
    NativeAppEventEmitter,
    CameraRoll,
} from 'react-native'

let YH_CommunityAssetsPicker = NativeModules.YH_CommunityAssetsPicker;


function renderPlus(assets) {
    if (assets.length<9) {
        return(
            <TouchableOpacity
                style={styles.itemContainer}
                onPress={()=>{YH_CommunityAssetsPicker.presentImagePicker(assets);}}
                >
                <Image style={styles.item} source={require('../../images/posting/add.png')}/>
            </TouchableOpacity>
        );
    }
}

function renderContent(assets, delAction) {
    if (assets.length) {
        return(
            <ScrollView
                style={styles.scroll}
                horizontal={true}
            >
                <View style={styles.scrollContainer}>
                    {
                        assets.map((asset,index)=>{
                            return(
                                <View style={styles.itemContainer} key={index}>
                                <Image style={styles.item} source={asset}/>
                                <TouchableOpacity onPress={()=>{delAction(index);}}>
                                <Image style={styles.itemDelete} source={require('../../images/posting/delete.png')}/>
                                </TouchableOpacity>
                                </View>
                            );
                        })
                    }
                    {renderPlus(assets)}
                </View>
            </ScrollView>
        );
    }else {
        return(
            <TouchableOpacity
                style={{flex:1,alignItems:'center',justifyContent:'center',}}
                onPress={()=>{YH_CommunityAssetsPicker.presentImagePicker(assets);}}
                >
                <Image style={styles.item} source={require('../../images/posting/add.png')}/>
            </TouchableOpacity>
        );
    }
}

export default class AssertsPicker extends Component {
    constructor(props) {
        super(props);
        this.observer;
        this.deleteAsset=this.deleteAsset.bind(this);
    }


    componentDidMount() {
        this.observer = NativeAppEventEmitter.addListener('EventReminder',(event)=>{
            this.props.assetsSelected(event.assets);
        })
    }

    componentWillUnmount() {
        this.observer.remove();
    }

    deleteAsset(assetIndex) {
        let existedAssets=this.props.assets;
        existedAssets.splice(assetIndex,1);
        this.props.assetsSelected(existedAssets);
        YH_CommunityAssetsPicker.deleteAssetAtIndex(assetIndex);
    }

    render() {
        return (
            <View style={styles.container} opacity={this.props.opacityToHide>0}>
                {renderContent(this.props.assets,this.deleteAsset)}
                <Text style={styles.pageText}>{this.props.assets.length + '/9'} </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    scroll: {
        flex:1,
        height: 200,
    },
    scrollContainer: {
        flex:1,
        flexDirection:'row',
        alignItems:'center',
        paddingLeft: 15,
    },

    itemContainer: {
        width: 90,
        height: 130,
        right:10,
        flexDirection:'row',
    },
    item: {
        top:10,
        width:80,
        height:120,
        backgroundColor:'#b0b0b0',
    },
    itemDelete: {
        width:20,
        height:20,
        left:-13
    },
    pageText: {
        color: '#a0a0a0',
        height: 41,
        fontSize:14,
        textAlign: 'center',
        fontWeight:'100',
    },
});