import React, { Component } from "react"
import { View, Text, TouchableOpacity, StyleSheet, Modal, ListView, EmitterSubscription } from 'react-native';

import BaseFunc from '../base/func'
import { IformState, IformProp, IformOption, IformInfo } from '../aim/form'
import OperateForm from '../operate/form'
import OperateData from '../operate/data'

import PlusItemIcon from '../item/icon'
import PlusCommonEvent from '../common/event'
import BaseDefine from '../base/define'
import PlusHelperItem from '../helper/item'


import { IbaseStyleExtend, IbasePropertyExtend, IbaseEventExpand, IbaseDeviceEvent, IclassEvent, IstructFormData } from "../aim/face"

interface State extends IformState {


}

interface Prop extends IformProp, IbasePropertyExtend, IbaseEventExpand {




}


let styles: IbaseStyleExtend = {

    styleMainTouch: {
        flexDirection: 'row',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },


    styleHeaderBox: {

        justifyContent: 'flex-end',

        alignItems: 'flex-end',
        flex: 1

    },

    styleLayoutCenter: {
        padding: 8
    },

    styleItemBox: {

        flexDirection: 'row',

        paddingTop: 10,
        borderBottomColor: '#fbfbfb',
        borderBottomWidth: 1
    },
    styleItemText: {
        flex: 1
    },
    styleItemIcon: {
        fontSize: 24,
        paddingLeft: 6
    },


    styleMainView: {
        flex: 1
    },

    styleMainText: {
        flex: 1,

    },

    styleMainIcon: {
        fontSize: 24
    }

}



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


    subscription: EmitterSubscription

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

        var sValue = OperateForm.upFormValue(props.name, props.formDefaultValue != undefined ? props.formDefaultValue : '');
        OperateForm.inRegexField(props.name, props.formRegexCode);
        this.state = { currentValue: sValue }
    }
    componentDidMount() {
        let sShowType = BaseFunc.stringEmptyDefault(this.props.formShowType, "");
        if (sShowType === "icon") {

            this.subscription = PlusCommonEvent.addListener(BaseDefine.upPlusDefine().eventDisplayRefresh + this.props.name, (data: IbaseDeviceEvent) => {
                this.setState({ currentValue: data.eventValue });
            });

        }
        else if (sShowType === "single") {


            if (this.props.pFamily != undefined) {

                let oFormStruct = OperateData.formData.rootUpValueByKey(this.props.pFamily);

                if (oFormStruct != undefined) {


                    let oData = JSON.parse(oFormStruct.jsonData);

                    let sShowText = BaseFunc.replaceWithObject(this.props.formExtendDisplay, oData);
                    OperateForm.inFormValue(this.props.name, sShowText);
                    OperateForm.inFormFieldExtendPage(this.props.name, oData.baseKey);

                    this.setState({ currentValue: sShowText });
                }

            }


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

                let oFormInfo: IformInfo = data.eventObject;

                let sShowText = BaseFunc.replaceWithObject(this.props.formExtendDisplay, BaseFunc.mapToObject(oFormInfo.dataInfo));

                OperateForm.inFormValue(this.props.name, sShowText);
                OperateForm.inFormFieldExtendPage(this.props.name, oFormInfo.baseKey);
                this.setState({ currentValue: sShowText });
                // this.changeSub(data.eventValue, 1);
            });

        }
        else if (sShowType === "sub") {


            if (this.props.pFamily != undefined) {
                let aKeys = [];

                OperateData.formData.upDataQuery(this.props.pFamily, { filter: this.props.formExtendQuery }).forEach(
                    (fItem) => {
                        aKeys.push(fItem.zzzkey);
                    }
                );
                this.setState({ currentValue: aKeys.join(',') });

            }




            this.subscription = PlusCommonEvent.addListener(BaseDefine.upPlusDefine().eventDisplayRefresh + this.props.name, (data: IbaseDeviceEvent) => {
                //this.setState({ currentValue: data.eventValue });
                this.changeSub(data.eventValue, 1);
            });

        }

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

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

        return true;
    }

    changeSub(sKey, iType) {
        if (iType === 4) {
            OperateData.formData.outValueByKey(sKey);
        }

        let sVal = BaseFunc.stringArrayOption(this.state.currentValue, sKey, iType);

        OperateForm.inFormValue(this.props.name, sVal);

        this.setState({ currentValue: sVal, currentText: Math.random().toString() });

    }



    _renderSub(sValue) {

        let aView = [];

        /*
        let aFormData: IstructFormData[] = [];



        sValue.split(',').forEach((fStr: string) => {
            if (!BaseFunc.stringIsEmpty(fStr)) {


                let oFormData = OperateData.formData.rootUpValueByKey(fStr);
                if (oFormData != undefined) {

                    aFormData.push(oFormData);
                }
            }
        })



        aFormData.forEach(
            (fItem) => {

                let oData = JSON.parse(fItem.jsonData);
                let fStr = fItem.zzzkey;


                aView.push(
                    <View style={styles.styleItemBox} key={fStr}>

                        <Text style={styles.styleItemText}>{BaseFunc.replaceWithObject(this.props.formExtendDisplay, oData)}</Text>
                        <TouchableOpacity onPress={() => { this.props.onPress({ key: fStr }) }}>
                            <PlusItemIcon pName="pencil" style={styles.styleItemIcon}></PlusItemIcon>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => { this.changeSub(fStr, 4) }}>
                            <PlusItemIcon pName="close-circle-outline" style={styles.styleItemIcon}></PlusItemIcon>
                        </TouchableOpacity>
                    </View>
                );
            }
        )
        */

        let sShowType = PlusHelperItem.upItemShowType(this.props.pShow);


        sValue.split(',').forEach((fStr: string) => {

            if (!BaseFunc.stringIsEmpty(fStr)) {


                let oFormData = OperateData.formData.rootUpValueByKey(fStr);


                if (oFormData != undefined) {



                    let oData = JSON.parse(oFormData.jsonData);




                    aView.push(
                        <View style={styles.styleItemBox} key={fStr}>

                            <Text style={styles.styleItemText}>{BaseFunc.replaceWithObject(this.props.formExtendDisplay, oData)}</Text>

                            {sShowType != 'book' ?
                                <TouchableOpacity onPress={() => { this.props.onPress({ key: fStr }) }}>
                                    <PlusItemIcon pName="pencil" style={styles.styleItemIcon}></PlusItemIcon>
                                </TouchableOpacity> : null}
                            {sShowType != 'book' ?
                                <TouchableOpacity onPress={() => { this.changeSub(fStr, 4) }}>
                                    <PlusItemIcon pName="close-circle-outline" style={styles.styleItemIcon}></PlusItemIcon>
                                </TouchableOpacity> : null

                            }
                        </View>
                    );
                }

            }

        });




        return aView;

    }


    render() {

        let sShowType = BaseFunc.stringEmptyDefault(this.props.formShowType, "");
        if (sShowType === "") {
            return (
                <View style={{ flex: 1 }}>
                    <Text>{this.state.currentValue}</Text>
                </View>

            );

        }
        else if (sShowType === "icon") {
            return (
                <TouchableOpacity style={styles.styleMainTouch} onPress={() => { this.props.onPress({}) }}>
                    <Text style={styles.styleMainText}>{this.state.currentValue}</Text>
                    <PlusItemIcon pName="sort-variant" style={styles.styleMainIcon}></PlusItemIcon>
                </TouchableOpacity>
            )
        }
        else if (sShowType === "single") {
            return (
                <TouchableOpacity style={styles.styleMainTouch} onPress={() => { this.props.onPress({}) }}>
                    <Text style={styles.styleMainText}>{this.state.currentValue}</Text>
                    <PlusItemIcon pName="sort-variant" style={styles.styleMainIcon}></PlusItemIcon>
                </TouchableOpacity>
            )
        }
        else if (sShowType === "sub") {
            return (

                <View style={styles.styleMainView}>
                    <View style={styles.styleLayoutCenter}>
                        {this._renderSub(this.state.currentValue)}
                    </View>
                </View>
            )
        }




    }


}