import React from 'react';
import styles from './TicketHeader.scss';


export default class NotificationHeader extends React.Component{

  constructor(props) {
    super(props);
  }

    render(){
   	debugger;
   	let props = this.props;
   	let onClick = this.props.onClick;
   	let data = this.props.data;
   	let completeData = this.props.completeTicketData;
   	let isNotificationRead = this.props.notificationRead;
   	let ticketHeaderMap = {
   		'TOUCHING_MISSING': 'CWH Missing',
   		'UNSCHEDULED_STOPPAGE' : 'UNS',
   		'ROUTE_DETOUR':'Route Detour',
   		'PS_WAITING':'PSWT',
   		'TRIP_VERIFICATION':'Trip Verification'
   	}

   	let url = `${this.props.hostUrls.primePanelNewUrl}tickets?ticketType=${props.ticketType}&ticketId=${completeData.ticketId}`;
    console.log("the props in ticket header is",props);

	return(
		<div className={`header ${isNotificationRead ? '' : 'unread-background'}
		 ${this.props.action === 'ASSIGNED' ? 'tag' : ''}`}>
				<a href={url} target="_blank">
					<div className="header-action"> {this.props.action} : </div>
				</a>
				<a href={url} target="_blank">
		  			<div className="header-key">{ticketHeaderMap[this.props.ticketType]} </div>
				</a>
		  		<div className="icon icon-notify" onClick={()=>{onClick(completeData)}} >
					<i className="material-icons icon">speaker_notes
					</i>
				</div>
		</div>
	)
	}

	}


