import React from 'react';
import Tooltip from '../../../Tooltip/Tooltip.js';


export default class TripClosureInfo extends React.Component{

    constructor(props) {
        super(props);
    }


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

        return(
            <div className={`body ${isNotificationRead ? '' : 'unread-background'}`}>
                {tripClosureFields.map((el)=>(
                    <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> 15 && el.accessor !== 'tripCode' ?
                                (<Tooltip
                                    hoverElement={data[el.accessor].substr(0,15) + "..."}
                                    tooltipText={data[el.accessor]}
                                    label={data[el.accessor]}
                                />) :
                                data[el.accessor]}
                        </div>
                    </div>
                ))}
            </div>
        )
    }

}

