import React, { Component } from 'react';
import { Input, Select, Radio, DatePicker,Form } from 'antd';
import { PageComponent } from "../../types/index";
import * as Tools from 'jad-tool'
import classname from 'classnames'



import { checkValidateRule,getFormData } from 'jad-tool'



const createFormFieldComponent = (FormFieldContext,config) => class FormField extends React.Component< PageComponent<{
    onValidateChange: (boolean)=>any
}>>{
    fields = {};
    validate = false;
    name = config.name
    public updateFieldItem(item){ 
        const { name = null } = item;
        if(!name) return
        this.fields[name] = item
        this.checkValidate()
    }
    public removeFiledItem(item){
        const { name = null } = item;
        if(!name) return
        delete this.fields[name]
        this.checkValidate()
    }
    public checkValidate(){
        const { onValidateChange } = this.props
        let error = false;
        Tools.map(this.fields,(fields)=>{
            if(error) return
            const { rule ,value } = fields
            error = checkValidateRule(rule,value)
        })
        if(this.validate !== !error && !Tools.isEmptyObject(this.fields)){
            this.validate = !error
            onValidateChange(this.validate)
        }
        return this.validate
    }
    public getFormData(){
        return getFormData(this.fields)
    }
    componentWillUnmount(){
        console.log('表单组件卸载')
    }
    render(){
        const { children } = this.props;
        return <FormFieldContext.Provider value={{
            //这里不可以使用state的变量,如果使用state的变量就不可以使用setState,不然会导致死循环
            updateFieldItem:this.updateFieldItem.bind(this),
            removeFiledItem:this.removeFiledItem.bind(this)
        }}>
            {children}
        </FormFieldContext.Provider>
    }
}



const createFormField_middle= (FormFieldContext,config)=> ({ config, componentInstance, interrupt })=>{
    class FormFieldItem extends React.Component{
        removeField = null
        componentWillUnmount(){
            if(Tools.isFunction(this.removeField)){
                this.removeField(componentInstance.props)
            }else{
                console.error('componentWillUnmount  removeFiledItem is not function')
            }
        }
        render(){
            const { children } = this.props;
            return <FormFieldContext.Consumer>
                {({updateFieldItem,removeFiledItem}) => {
                    updateFieldItem(componentInstance.props)
                    if(!Tools.isFunction(this.removeField)){
                        this.removeField = removeFiledItem
                    }
                    return children
                }}
            </FormFieldContext.Consumer>
        }
    }
    return(next) => (params) => {
        next(<FormFieldItem>{params}</FormFieldItem>)
}}




export const createFormField = (config={}) => {
    config = Tools.extend({
        name:`form_${Tools.getUniqueID()}`,
    },config)
    const FormFieldContext = React.createContext(null)
    // class
    const FormFieldComponent = createFormFieldComponent(FormFieldContext,config)
    // middle
    const formFieldItem_middle = createFormField_middle(FormFieldContext,config)
    return {
        FormFieldComponent,
        formFieldItem_middle
    }
}