import React from 'react';
import styles from './TicketData.scss';
import Tooltip from '../../../Tooltip/Tooltip.js';
import {timeDifferenceInDaysAndHours} from '../../../../UtilitiesFunctions/objectUtilities.js';


export default class NotificationBody extends React.Component{

  constructor(props) {
    super(props);
  }


   render(){
   	debugger;
   	let props = this.props;
   	let data = props.data;
   	let fields = props.fields;
   	let isNotificationRead = props.notificationRead;

	return(<div className={`body ${isNotificationRead ? '' : 'unread-background'}`}>		
					{
						fields.map((el)=>{
							if(el.Header === "Raised By"){
                                let lastUpdateTime = data.lastUpdatedTimestamp;
                                if(lastUpdateTime && lastUpdateTime.iMillis)
                                    lastUpdateTime = lastUpdateTime.iMillis;
                                data[el.accessor] = data.lastUpdatedBy + ((lastUpdateTime)?(' | ' + timeDifferenceInDaysAndHours(lastUpdateTime,(new Date).getTime())):'');
							}
							return(
					  		<div  
					  			 className={`flex-item ${el.Header === "Trip Code"? 'trip-code' : 'ticket-entry'}`} >
					  			<div className="action"> {el.Header} :</div>
					  			<div className="key">
                                    {(data[el.accessor] && data[el.accessor].length >= 22 && el.accessor !== 'tripCode') ?
                                        (<Tooltip
											hoverElement={data[el.accessor].substr(0, 19) + "..."}
											tooltipText={data[el.accessor]}
											label={data[el.accessor]}
										/>) :
                                        ((data[el.accessor] && data[el.accessor].length >= 54 && el.accessor === 'tripCode') ?
												<Tooltip
													hoverElement={data[el.accessor].substr(0, 51) + "..."}
													tooltipText={data[el.accessor]}
													label={data[el.accessor]}
												/>
                                                : data[el.accessor]
                                        )
                                    }
					  			</div>
					  		</div>
					  	)
					})
					}
			</div>

	)
	}

	}

