import React,{PropTypes} from 'react';  
import {Table} from 'react-bootstrap';  
import cx from 'classnames';
import s from './SimpleTable.scss';
import moment from 'moment';

class SummaryTable extends React.Component {
	constructor (props) {
	    super(props);   
	} 
	static propTypes = {   
    	rowClick:PropTypes.func,
    	rowsData:PropTypes.array,
    	headTitle:PropTypes.array,
		resource:PropTypes.object
	}  
	clickRow(row,e){
		this.props.rowClick(row);
	}

	getDays(items){
		let dates = [];
		if(items&&items.length>0){
			let startDate=moment(items[0].start_date,'YYYY-MM-DD');
			let endDate = moment(items[0].end_date,'YYYY-MM-DD');
			for(let i=1;i<items.length;i++){
				let item = items[i];
				startDate=moment.min(startDate, moment(item.start_date,'YYYY-MM-DD'));
				endDate = moment.max(endDate, moment(item.end_date,'YYYY-MM-DD'));
			}
			for(var date=startDate;date.isSameOrBefore(endDate);date=date.add(1,'d')){
				dates.push(date.clone());
			}
		}
		return dates;
	}

	renderFixHead(){ 
		const {headTitle}=this.props;
		return headTitle.map((title,i)=>{
  			return (<th key={i}>{title.displayName}</th>);
		})
	}

	renderDays(days){
		return days.map((day,i)=>{
  			return (<th key={i}>{day.format('DD')}</th>);
		})


	}

	componentWillUnmount(){ 
		console.log('table will remove!');
	}

	formatValue(value, dataType){
		if (dataType&&value&&value.length>0){
			switch(dataType){
				case 'date':
					value = moment(value).format('YYYY-MM-DD');
					break;
				case 'timeList':
					let values = value.split(',');
					for(let i=0;i<values.length;i++){
						let v=values[i];
						values[i]=moment(v).format('HH:mm');
						value = values.join(',');
					}
					break;
				default:
					break;
			}
		}
		return value;
	}

	renderColumn(row, days){
		this.renderFixPart(row);
//		this.renderDaySummary(row, days);
	}

	renderFixPart(row){  
		const {headTitle} = this.props;
		return headTitle.map((title,i)=>{
			let key = title.key;
			let isTabular = title.isTabular;
			let isSubFields = title.isSubFields;
			let dataType = title.dataType;
			let value = '';
			if(isTabular&&isTabular==true){
				let keys = key.split('.');
				let length = keys.length;
				let i=0;
				let object=row;
				for(;i<length-2;i++){
					let curKey = keys[i];
					object = object[curKey];
				}
				let objects=object[keys[length-2]];
				let objNum = objects.length;
				i=0;
				let values=[];
				let curKey = keys[length-1];
				for(;i<objNum;i++){
					let curObj = objects[i];
					values.push(curObj[curKey]);
				}
				value = values.toString();
			}
			else if(isSubFields&&isSubFields==true){
				let keys = key.split('.');
				let curKey = keys[0]+'_sub_fields';
				let subFields = row[curKey];
				curKey = keys[1];
				for(let i=0;i<subFields.length;i++){
					if(subFields[i].field_name==curKey){
						value = subFields[i].value;
						break;
					}
				}
			}
			else
				value = row[key];
			if (dataType){
				value = this.formatValue(value,dataType);
			}
  			return (<td key={i}>{value}</td>);
  		})
	}

	renderDaySummary(row, days){

		let summary = row.summary;
		let daySums = [];
		if(summary){
			daySums = JSON.parse(summary);
		}
		const {resource}=this.props;

		return days.map((day,i)=>{
			let value = '';
			for(let i=0;i<daySums.length;i++){
				let daySum = daySums[i];
				let date = moment(daySum.date,'YYYY-MM-DD');
				if(day.isSame(date)){
					value = daySum.status;
					break;
				}
			}
			return (<td key={i}>{resource[value]}</td>);
		});
		
	}
	renderDatas(days){
		const {rowsData}=this.props,self=this; 
		if(rowsData==null){
			return null;
		}
		return rowsData.map((row,i)=>{
			return (<tr className={cx(s.table_tr)} onClick={self.clickRow.bind(self,row)} key={i}>
				{self.renderFixPart(row)}
				{self.renderDaySummary(row,days)}
				</tr>);
		})
	}
	render(){  
		const {rowsData}=this.props;
		const days = this.getDays(rowsData);
		return( 
			<div className={cx(s.simple_table_wrap)}>
				<table className={cx('table')}>
				    <thead>
				      <tr> 
						{this.renderFixHead()}
						{this.renderDays(days)}
				      </tr>
				    </thead>
				    <tbody>
				    	{this.renderDatas(days)} 
				    </tbody>
				</table>
			</div>
		)
	}
}
 


export default SummaryTable;