import React, { Component } from "react"
import { Button, EmitterSubscription, TouchableOpacity, Text, ViewStyle, ActivityIndicator, View } from 'react-native';
import BaseFunc from '../base/func'
import PlusCommonEvent from '../common/event'
import BaseDefine from '../base/define'

import { IformProp, IformOption } from '../aim/form'
import { IclassEvent, IbaseStyleExtend, IbasePropertyExtend, IbaseDeviceEvent, IbaseEventExpand } from '../aim/face'

interface State {

    flagEnable: boolean
    loadingText: string
}

interface Prop extends IbasePropertyExtend, IbaseEventExpand, IbaseStyleExtend {





}
let styles: IbaseStyleExtend = {

    styleMainTouch: {

        alignItems: 'center',
        paddingTop: 10,
        paddingBottom: 10,
        borderRadius: 4,
        backgroundColor: '#1f90e6',
        margin: 15
    },
    styleMainText: {
        color: 'white',
        fontSize: 16,
        lineHeight: 20
    },
    styleItemText: {
        color: 'white',
        fontSize: 16,
        lineHeight: 20,
        paddingLeft: 10
    },
    styleMainView: {
        flexDirection: 'row'
    }





}

/**
 * Hello
 */
export default class extends Component<Prop, State> implements IclassEvent {

    subscription: EmitterSubscription

    constructor(props: Prop) {
        super(props);

        if (this.props.pSubscribe != undefined) {
            this.subscription = PlusCommonEvent.addListener(BaseDefine.upPlusDefine().eventSubscribeUpdate + this.props.pSubscribe, (data: IbaseDeviceEvent) => {
                //that.updateDataSource(data, that);
                if (data.eventState != undefined) {
                    //如果通知操作已完成
                    if (data.eventState == 1) {
                        this.setState({ flagEnable: true, loadingText: '' });
                    }
                    //如果通知变换文字
                    else if (data.eventState == 5) {
                        this.setState({ flagEnable: true, loadingText: data.eventValue });
                    }
                    //loading 事件正在执行中
                    else if (data.eventState == 12) {
                        this.setState({ flagEnable: false, loadingText: data.eventValue });
                    }

                }

            });

        }

        this.state = { flagEnable: true, loadingText: '' };

    }
    render() {

        let aStyleColor: ViewStyle = {};
        if (this.props.pColor != undefined) {
            let sColor;
            if (this.props.pColor === 'danger') {
                sColor = '#FF6666';
            }
            else {
                sColor = this.props.pColor;
            }

            aStyleColor.backgroundColor = sColor;
        }

        return (
            <TouchableOpacity style={[styles.styleMainTouch, this.props.styleMainTouch]} onPress={() => { if (this.state.flagEnable) { this.props.onPress({}) } }}>

                {
                    this.state.flagEnable ? (<Text style={[styles.styleMainText, this.props.styleMainText]}>{this.state.loadingText ? this.state.loadingText : this.props.pText}</Text>) : (
                        <View style={styles.styleMainView}>
                            <ActivityIndicator color="white" ></ActivityIndicator><Text style={styles.styleItemText}>{this.state.loadingText}</Text></View>)
                }

            </TouchableOpacity>


        );
    }

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

        return true;
    }

    componentWillUnmount() {
        this.clearSubscription();
    };


}