import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom'; 
import cx from 'classnames';
import s from './ReadonlyForm.scss';
 
 
class ReadonlyForm extends React.Component {
    constructor(props) {
        super(props);  
        this.state={
            sections:[]
        } 
    }
    static propTypes = {   
        formDefind:PropTypes.object,
        record:PropTypes.object
    }
    componentWillMount(){
        const {formDefind:{items}}=this.props;
        if(items&&items.length>0){
            this.setState({
                sections:items
            })
        }
    } 
    componentDidMount(){
    	
    }  
    renderFields(fields){
    	const {record}=this.props,self=this;
    	return fields.map((field,i)=>{
    		const options=JSON.parse(field.options); 
            const fieldType=field.type;
            const fieldKey='lookup'==fieldType?field.name:field.name;
    		return ( 
                <dl  key={i}  className={cx('dl-horizontal',s.item_wrpa)}>
                  <dt className={cx(s.item_lable)}>{field.display_name}</dt>
                  <dd className={cx('text-left',s.item_value)}>{record[fieldKey]}</dd>
                </dl>  
			)
    	})
    }
    renderSections(){
    	const {sections}=this.state,self=this;
    	if(sections.length>1){
    		return sections.map((section,i)=>{
	    		return( 
	    			<fieldset key={i}>
						<legend>{section.display_name}</legend>
						{self.renderFields(section.fields)} 
					</fieldset>
				)
			});
    	}else if(sections.length==1){
    		return this.renderFields(sections[0].fields);
    	}
    }
    render(){  
    	const {formDefind,record}=this.props; 
        return (
            <div className={cx('custom_form_wrap')}>
            	{this.renderSections()} 
                <div className={cx('bottom_wrap')}></div>
            </div>
        )
    }
}

export default ReadonlyForm;