import React, { Component } 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 baseShow_middle = ({ config, componentInstance, interrupt }) => (next) => (params) => {
    const { show = true } = componentInstance.props
    if (!show) {
        interrupt(null)
    }
    next(params)
}


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


export const baseFormLabel_middle = ({ config, componentInstance, interrupt }) => (next) => (params) => {
    const { label = '', hint = '', } = componentInstance.props
    const render = (
        <div className='jad-formMiddle-base-container'>
            <label className='jad-formMiddle-base-label' >{label}</label>
            <div className='jad-formMiddle-base-content'>
                {params}
                {
                    hint ?
                        <span className={classname('jad-formMiddle-base-hint', Tools.isString(hint) ? '' : 'jad-formMiddle-rc')}>{hint}</span>
                        : ''
                }
            </div>
        </div>
    )
    next(render)
}


export const baseInput_middle = ({ config, componentInstance, interrupt }) => {
    //如果中间件内部使用classComponent 需要把他放到第一次科里化中 ，不然会因为fiber.elementType render的不同一直卸载重装
    // fiber的update是同步的 Input update被提升
    // 导致 第一次 input value = a
    // 第二次 classComponent update input value = ''
    // 第三次 classComponent propsUpdate input value = a
    class InputMiddel extends React.Component<any>{
        state = {
            value: ''
        }
        constructor(props) {
            super(props)
            if ('value' in props) {
                this.state.value = props.value
            }
        }
        UNSAFE_componentWillReceiveProps(nextProps) {
            if ('value' in nextProps) {
                this.setState({
                    value: nextProps.value
                })
            }
        }
        handleChange = (e) => {
            const { onChange = (e) => e } = this.props
            this.setState({
                value: e.target.value
            })
            onChange(e)
        }
        render() {
            const { type = 'text',props={}, placeholder = "", disabled = false, name = "", style = { width: '100%' } } = this.props
            const { value } = this.state
            return <Input
                {...props}
                placeholder={placeholder}
                disabled={disabled}
                value={value}
                style={style}
                key={name}
                name={name}
                type={type}
                onChange={this.handleChange}
            />
        }
    }//如果中间件内部使用classComponent 需要把他放到第一次科里化中 ，不然会因为fiber.elementType render的不同一直卸载重装
    return (next) => (params) => {
        next(<InputMiddel {...componentInstance.props} />)
    }
}


export const baseSelect_middle = ({ config, componentInstance, interrupt }) => (next) => (params) => {
    const { value = [], props={}, placeholder = "", disabled = false, onChange = (e) => { }, children = null, style = { width: '100%' }, showSearch = false, filterOption = false, onSearch = (e) => { } } = componentInstance.props
    const render = (
        <Select
            {...props}
            style={style}
            className='jad-formMiddle-select'
            value={value}
            placeholder={placeholder}
            disabled={disabled}
            onChange={onChange}
            showSearch={showSearch}
            filterOption={filterOption}
            onSearch={onSearch}
        >
            {children}
        </Select>
    )
    next(render)
}


export const baseRadio_middle = ({ config, componentInstance, interrupt }) => (next) => (params) => {
    const { value = false, props={}, disabled = false, onChange = (e) => { }, children = null } = componentInstance.props
    const render = (
        <Radio.Group
            {...props}
            value={value}
            disabled={disabled}
            onChange={onChange}
        >
            {children}
        </Radio.Group >
    )
    next(render)
}


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