import React,{Component} from 'react'
import {DatePicker as DatePicker1} from 'antd'
import FormItem from './FormItem'
import moment from 'moment';

const Format = 'YYYY-MM-DD'

export  class DatePicker extends Component{
    onChange=(date, dateString)=>{
        this.props.onChange && this.props.onChange(dateString)
        this.props.onAfterChange && this.props.onAfterChange(dateString)
    }
    
    render()
    {
        let {value,...rest} = this.props
        let mom = null
        if(value)
            mom = moment(value,Format)
        return (<DatePicker1 size="small" allowClear={true} {...rest} value={mom} onChange={this.onChange}/>)
    }
}

export  class DatePickerItem extends Component{
    constructor(props)
    {
        super(props)
        this.state = {hadBlur:false}
    }
    shouldComponentUpdate(nextProps,nextState)
    {
        if(isEquals(nextProps,this.props) && isEquals(nextState,this.state))
            return false
        return true;
    }
    setBlur=()=>{
        if(!this.state.hadBlur)
            this.setState({hadBlur:true})
        this.props.onBlur && this.props.onBlur()
    }
    dateDisabled=(time)=>{
      return this.props.dateDisabled && this.props.dateDisabled(time)
    }
    render()
    { 
        const {InputProps,ItemProps,placeholder,disabled} = this.props
        const  help = (InputProps && InputProps.formBlur) || this.state.hadBlur ? InputProps.help :''
        const {inDisplay,displayChanged,...rest} =  InputProps
        
        return (
            <FormItem validateStatus={help?"error":null}  help={help} {...ItemProps}>
                <DatePicker {...rest} onBlur={this.setBlur}  disabled={disabled} placeholder={placeholder} style={{color:displayChanged?'red':undefined}} disabledDate={this.dateDisabled} />
            </FormItem>
        )
    }
}