import React, { Component } from "react"
import { ListView, FlatList, ListViewProperties, View, Text, ActivityIndicator, EmitterSubscription } from 'react-native';
import BaseDefine from '../base/define'
import BaseFunc from '../base/func'

import PlusCommonEvent from '../common/event'

import { IbaseStyleExtend, IbaseDeviceEvent, IbasePlusProp, IbasePropertyExtend } from "../aim/face"
import PlusItemIcon from '../item/icon'
import PlusCommonLog from '../common/log';

interface State {

    dataArray
    dataSource
}

interface Prop extends ListViewProperties, IbasePlusProp, IbaseStyleExtend, IbasePropertyExtend {




}

const styles: IbaseStyleExtend = {

    styleMainView: {

        flex: 1
    },
    styleLayoutCenter: {
        flex: 1
    },
    styleLayoutTop: {
        justifyContent: 'center',
        alignItems: 'center',
        alignContent: 'center'
    },
    styleMainIcon: {
        fontSize: 80,
        margin: 30,
        color: '#cccccc'

    },
    styleMainText: {
        fontSize: 24,
        color: '#cccccc'
    }
};


export default class extends Component<Prop, State> {


    subscription: EmitterSubscription

    constructor(props: Prop) {
        super(props);
        let aData = this.props.plusListSource();
        if (aData === undefined) {
            aData = [];
        }

        if (this.props.plusMacroName) {



            let that = this;



            this.subscription = PlusCommonEvent.addListener(BaseDefine.upPlusDefine().eventListRefresh + this.props.plusMacroName, (data: IbaseDeviceEvent) => {




                that.updateDataSource(data, that);


            });


        }



        this.state = {
            dataArray: aData,
            dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }).cloneWithRows(aData)
        }
    }

    componentWillUnmount() {
        if (this.subscription)
            this.subscription.remove();
    };


    updateDataSource(oData: IbaseDeviceEvent, that) {

        let aDataInfo = [];
        let aNew = [];

        if (oData == undefined || oData.eventArray == undefined) {
            aDataInfo = that.props.plusListSource();
        }
        else {

            aDataInfo = oData.eventArray;
        }

        aDataInfo.forEach((fItem) => { aNew.push(fItem) });



        if (oData.eventValue != undefined && oData.eventValue == "set") {
            that
                .setState(
                {
                    dataArray: aNew,
                    dataSource: that.state.dataSource.cloneWithRows(aNew)
                }
                );
        }
        else {
            that
                .setState(
                {
                    dataArray: aNew,
                    dataSource: that.state.dataSource.cloneWithRows(aNew)
                }
                );
        }




        /*
        this.state={
                    dataArray: aDataInfo,
                    dataSource: that.state.dataSource.cloneWithRows(aDataInfo)
                };
        
            */

    }



    render() {

        //presentation

        let sTextShow = BaseFunc.upLang(12201);
        if (this.props.pText != undefined) {
            sTextShow = this.props.pText;
        }


        return (
            <View style={[styles.styleMainView, this.props.style]}>
                {
                    this.state.dataArray.length <= 0 ?
                        (<View style={styles.styleLayoutTop}><PlusItemIcon pName="information-outline" style={[styles.styleMainIcon, this.props.styleMainIcon]}></PlusItemIcon>
                            <Text style={[styles.styleMainText, this.props.styleMainText]}>{sTextShow}</Text></View>) : null
                }

                <ListView style={styles.styleLayoutCenter} ref="listview" enableEmptySections={true} dataSource={this.state.dataSource} renderRow={this.props.renderRow}
                    onEndReached={this.props.onEndReached} onEndReachedThreshold={this.props.onEndReachedThreshold}
                >
                </ListView>
            </View>
        );
    }

}