import React,{PropTypes} from 'react';
import { connect } from 'react-redux'; 
import ReactDOM from 'react-dom';
import {reduxForm,destroy} from 'redux-form';
import { Button } from 'react-bootstrap';
import Section from './form/Section'; 
import cx from 'classnames';
import s from './FormRender.scss';
import {getReduxFormFieldKeys,getReduxFormValidate,handleInitialValues,formatTabularValues,loadFormFields} from './form/FormUtils';
import {loadEmployees,loadOrganizations} from '../../redux/actions/hrSetting'; 
import {DropdownField} from './customForm'; 
import {Alert} from './custom';
import {getErrors} from './form/FormUtils';
import {NonTabularSection,FileUploadSection,TabularSection,formWrapFactory} from './antForm'; 

 

const handleFormDefinde=(definde)=>{ 
    let basicInfoSection=[];
    const nonTabularSection=[];
    const fileUploadSection=[];
    const tabularSection=[];   
    definde.map((section,i)=>{
        if(section.name=="basic_info"){
            basicInfoSection=basicInfoSection.concat(section.fields); 
        }else{
            if(section.type=="tabular"){
                tabularSection.push(section);
            }else{
                section.fields.map((field,index)=>{
                    if(field.type=="file_upload"){
                        fileUploadSection.push(field);
                    }else{
                        nonTabularSection.push(field);
                    }
                });
            }
        }
    });   
    return {basicInfoSection,nonTabularSection,fileUploadSection,tabularSection};
}   
 

class FormRender extends React.Component {
	constructor(props) {
        super(props);   
        this.formWillSubmit=this.formWillSubmit.bind(this); 
        this.showMore=this.showMore.bind(this); 
        this.state={ 
            showMore:false
        }
    }
    static propTypes = {   
        formDefine:PropTypes.object,
        baseUrl:PropTypes.string,
        formStyle:PropTypes.object,
        sectionStyle:PropTypes.object,
        renderField:PropTypes.object,
        fields: PropTypes.object.isRequired,
        handleSubmit: PropTypes.func.isRequired,
        resetForm: PropTypes.func.isRequired,
        submitting: PropTypes.bool.isRequired,
        submit:PropTypes.func,
        column:PropTypes.number,
        className:PropTypes.string,
        customSection:PropTypes.func,
        customSectionKeys:PropTypes.array,
        defaultValues:PropTypes.object,
        type:PropTypes.string,
        service:PropTypes.string,
        needApprover:PropTypes.bool,
        nextForm:PropTypes.func 
    } 
    showMore(){
        const {showMore}=this.state;
        this.setState({
            showMore:!showMore
        })
    }
    componentWillReceiveProps(nextProps) {
 
    }
    componentWillUnmount(){ 
    }
    formWillSubmit(values){ 
        const {showMore}=this.state;
        const {submit,submitting}=this.props;
        if(!showMore){
            values["initiate_update_request"]=true;
        }
       return submit(values);  
    }  
    render(){  
    	const {formDefine,fields,error,successMsg,baseUrl,submit,column,customSectionKeys,customSection,needApprover,employees,organizations}=this.props,self=this;
        const { resetForm, handleSubmit, submitting} = this.props;  
        const {showMore}=this.state; 
        const {basicInfoSection=[],nonTabularSection=[],fileUploadSection=[],tabularSection=[]}=formDefine;
        return( 
            <div className={cx(s.form_wrap)}>
                <form className={cx(s.form_body)}  onSubmit={handleSubmit(this.formWillSubmit)}> 
                        <NonTabularSection nonTabularSection={basicInfoSection} fields={fields}></NonTabularSection>
                        {!showMore&&<Button onClick={this.showMore}>更多</Button>}
                        {showMore&&<div>
                            <NonTabularSection nonTabularSection={nonTabularSection} fields={fields}></NonTabularSection>
                            <TabularSection tabularSection={tabularSection} fields={fields}></TabularSection>
                            <FileUploadSection fileUploadSection={fileUploadSection} fields={fields}></FileUploadSection>{/**/} 
                        </div>
                        }
                </form> 
                {successMsg&&<Alert autoHide={true} messageBlock='success'>{successMsg}</Alert>}
                {error&&<Alert messageBlock='danger'>{error}</Alert>} 
                <div className={cx(this.props.className,'tr')}> 
                    <a className={cx(s.submit_btn,submitting?s.disabled:'')} disabled={submitting} onClick={handleSubmit(this.formWillSubmit)}  > 提交表单</a>
                </div>  
            </div> 
        )
    }
} 

const formFactory=(option=>{
    const {formDefine,name,defaultValues,destroyOnUnmount}=option;
    const fields=getReduxFormFieldKeys(formDefine);
    const validate =getReduxFormValidate(formDefine);   
    return reduxForm({
        form:name,
        fields:fields,
        destroyOnUnmount,
     //   validate,
        initialValues:defaultValues?defaultValues:{}
    })(FormRender)
});

class CreateEmployeeWrap extends React.Component {
    constructor(props) {
        super(props);   
        this.getForm=this.getForm.bind(this); 
        this.state={
            customForm:null
        } 
    }
    static propTypes = {   
        formName:PropTypes.string,
        baseUrl:PropTypes.string,
        fieldsConfig:PropTypes.object,
        column:PropTypes.number,
        className:PropTypes.string,
        submit:PropTypes.func,
        customSection:PropTypes.func,
        customSectionKeys:PropTypes.array, 
        defaultValues:PropTypes.object,
        type:PropTypes.string,
        needApprover:PropTypes.bool,
        service:PropTypes.string
    }
    static defaultProps = {  
        type:'create',//create|edit|readOnly
        needApprover:false
    } 
    getForm(data){
        const {formName,fieldsConfig,submit,baseUrl,column,className,defaultValues,employees,successMsg}=this.props,self=this;
        const defaultForm=handleFormDefinde(data.items);
        const CustomForm=formFactory({
            name:'employee_create_form',
            formDefine:defaultForm,
            destroyOnUnmount:false, 
            defaultValues:defaultValues 
        });  
        self.setState({
            customForm:<CustomForm successMsg={successMsg} formDefine={defaultForm} className={className} column={column} baseUrl={baseUrl}  submit={submit}  /> 
        })
    }
    componentDidMount(){ 
        const {formName,baseUrl}=this.props,self=this;
        loadFormFields(formName,baseUrl)
        .then(function(data){  
            self.getForm.call(self,data); 
        }).catch(function(error){
            
        });   
    } 
    componentWillReceiveProps(nextProps){
        const {formName,baseUrl}=nextProps,self=this; 
        loadFormFields(formName,baseUrl)
        .then(function(data){  
            self.getForm.call(self,data); 
        }).catch(function(error){

        });  
    } 
    componentWillUnmount(){
        const {dispatch}=this.props; 
        dispatch(destroy('employee_create_form'));
    }
    render(){    
        return (
            <div className={cx('custom_form_wrap')}>
                {this.state.customForm} 
            </div>
        )
    }
}

const mapStateToProps = (state) => {  
  const {hrSetting:{needLoadEmp,employees,needLoadOrg,organizations,positions}}= state;
  return {
    needLoadEmp,
    employees,
    needLoadOrg,
    organizations,
    positions
  };
}


export default connect(mapStateToProps)(CreateEmployeeWrap);