import React, { Component,useCallback,useState ,useEffect} from 'react';
import { Input, InputNumber, Select, Radio, DatePicker, Form } from 'antd';
import * as Tools from 'jad-tool'
import classname from 'classnames'

import { checkValidateRule } from 'jad-tool'
const { RangePicker } = DatePicker;


export const show_FnMiddle = ({ interrupt }) => (next) => (params,child) => {
    const { show = true } = params
    if (!show) {
        interrupt(null)
    }
    next(params,child)
}


export const validate_FnMiddle = ({  interrupt }) => {
    const ValidateMiddle = (params)=>{
        let { 
            value, 
            props={}, 
            rule = new RegExp(''), 
            message = '', 
            children = null 
        } = params
        let error = checkValidateRule(rule, value)
        message = Tools.isString(error) ? error : message;
        const validate = !error ? 'success' : 'error';
        const help = !error ? false : message
        return (
            <div style={{ flex: "1 1" }}>
                <Form.Item {...props} validateStatus={validate} help={help}>
                    {children}
                </Form.Item>
            </div>
        )
    }
    return (next) => (params,child) => {
        const render = <ValidateMiddle {...params}>{child}</ValidateMiddle>
        next(params,render)
    }
}


export const formLabel_FnMiddle = ({ interrupt }) =>{
    const FormLabelMiddle = (props) => {
        const { label = '', hint = '', children = null } = props
        return (
            <div className='jad-formMiddle-base-container'>
                <label className='jad-formMiddle-base-label' >{label}</label>
                <div className='jad-formMiddle-base-content'>
                    {children}
                    {
                        hint ?
                            <span className={classname('jad-formMiddle-base-hint', Tools.isString(hint) ? '' : 'jad-formMiddle-rc')}>{hint}</span>
                            : ''
                    }
                </div>
            </div>
        )
    }
    return (next) => (params,child) => {
        const render = <FormLabelMiddle {...params}>{child}</FormLabelMiddle>
        next(params,render)
    }
}


export const input_FnMiddle  = ({ interrupt }) => {
    const InputMiddle = (params)=>{
        const [text,SetText] = useState('')
        const {
            props = {}, 
            value="", 
            style = { width: '100%' }, 
            onChange=()=>null,
            placeholder = "", 
            disabled = false,
            name = "",
        } = params
        useEffect(()=>{
            SetText(value)
        },[value])
        return  <Input
            {...props}
            name={name}
            placeholder={placeholder}
            disabled={disabled}
            value={text}
            style={style}
            onChange={(e)=>{
                const inputValue = e.target.value
                SetText(inputValue)
                onChange(e)
            }}
        />
    }
    return (next) => (params,child) => {
        const render = <InputMiddle {...params}/>
        next(params,render)
    }
}


export const select_FnMiddle = ({ interrupt }) => {
    const SelectMiddle = (params)=>{
        const { 
            props={},
            value = undefined,  
            placeholder = "", 
            disabled = false, 
            onChange = (e) => { }, 
            children = null, 
            style = { width: '100%' }, 
        } = params
        return   <Select
                {...props}
                style={style}
                className='jad-formMiddle-select'
                value={value}
                placeholder={placeholder}
                disabled={disabled}
                onChange={onChange}
            >
                {children}
            </Select>
    }
    return (next) => (params,child) => {
        const render = <SelectMiddle {...params}>{child}</SelectMiddle>
        next(params,render)
    }
}


export const radio_FnMiddle = ({ interrupt }) => {
    const RadioMiddle = (params)=>{
        const { 
            value = false, 
            props={}, 
            disabled = false, 
            onChange = (e) => { }, 
            children = null
        } = params
        return <Radio.Group
            {...props}
            value={value}
            disabled={disabled}
            onChange={onChange}
        >
            {children}
        </Radio.Group >
    }
    return (next) => (params,child) => {
        const render = <RadioMiddle {...params}>{child}</RadioMiddle>
        next(params,render)
    }
}


export const rangePicker_FnMiddle = ({ interrupt }) => {
    const RangePickerMiddle = (params)=>{
        const { 
            value = false, 
            props={}, 
            disabled = false, 
            onChange = (e) => { }  
        } = params
        return <RangePicker
            {...props}
            className='jad-formMiddle-calendar'
            value={value}
            disabled={disabled}
            onChange={onChange}
        />
    }
    return (next) => (params,child) => {
        const render = <RangePickerMiddle {...params} />
        next(params,render)
    }
}