'use strict'

/**
 * 照片选择页面
 */
import React, {Component} from 'react';
import {
    View,
    Image,
    Text,
    ScrollView,
    TouchableOpacity,
    Platform,
    Dimensions,
    StyleSheet,
    NativeModules,
    NativeAppEventEmitter,
} from 'react-native';
import PropTypes from 'prop-types';

let YH_CommunityAssetsPicker = NativeModules.YH_CommunityAssetsPicker;

export default class AssertsPicker extends Component {

    static propTypes = {
        assets: PropTypes.array,
        hidden: PropTypes.bool,
        onSelectedAsset: PropTypes.func,
    };

    constructor(props) {
        super(props);

        this.observer = null;
        this.renderContent = this.renderContent.bind(this);
        this.renderPlus = this.renderPlus.bind(this);
        this.deleteAsset = this.deleteAsset.bind(this);
    }

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

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

    renderPlus(assets) {
        if (assets.length >= 9) {
            return null;
        }

        let plusStyle = styles.itemContainer;
        let itemStyle = null;
        if (assets.length == 0) {
            plusStyle = {
                flex: 1,
                height: 175,
                alignItems: 'center',
                justifyContent: 'center',
            };
            itemStyle = {
                top: -10,
            };
        }

        return (
            <TouchableOpacity
                style={plusStyle}
                onPress={() => {
                    YH_CommunityAssetsPicker.presentImagePicker(assets);
                }}
            >
                <Image style={[styles.item, itemStyle]} source={require('../../images/posting/add.png')}/>
            </TouchableOpacity>
        );
    }

    renderContent(assets) {
        if (assets.length == 0) {
            return this.renderPlus(assets);
        }

        return (
            <ScrollView
                ref={ref => this.scrollView = ref}
                style={styles.scroll}

                horizontal={true}
                onContentSizeChange={(width, height) => {
                    let screenWidth = Dimensions.get('window').width;
                    let offset;
                    if (width > screenWidth) {
                        this.scrollView.scrollTo({x: width - screenWidth});
                    }
                }}
            >
            <View style={styles.scrollContainer}>
                {assets.map((asset, index) => {
                    return (
                        <View style={styles.itemContainer} key={index}>
                            <Image style={styles.item} source={asset}/>
                            <TouchableOpacity onPress={() => {this.deleteAsset(index);}}>
                                <Image style={styles.itemDelete} source={require('../../images/posting/delete.png')}/>
                            </TouchableOpacity>
                        </View>
                    );
                })}
                {this.renderPlus(assets)}
            </View>

            </ScrollView>
        );
    }

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

    render() {
        let {assets, hidden} = this.props;
        if (hidden) {
            return null;
        }

        return (
            <View style={styles.container}>
                {this.renderContent(assets)}
                <Text style={styles.pageText}>{assets.length + '/9'}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: 200,
    },
    scroll: {
        height: 175,
    },
    scrollContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height: 175,
        paddingLeft: 24,
        paddingRight: 12,
    },
    itemContainer: {
        flexDirection: 'row',
        width: 90,
        height: 130,
    },
    item: {
        top: 10,
        width: 80,
        height: 120,
        backgroundColor: '#b0b0b0',
    },
    itemDelete: {
        width: 20,
        height: 20,
        left: -13,
    },
    pageText: {
        color: '#B0B0B0',
        fontFamily: 'Helvetica Light',
        fontSize: 13,
        textAlign: 'center',
        bottom: 15,
    },
});