import React from "react"
import { TrackingTruckIconSvg } from "../assets/svg/TrackingTruckSvg"
import moment from "moment"

export const TollHistoryList = (props: { track_locations: any, destination_in?: string, destination_location?: string }) => {
    const { track_locations = [], destination_in = '', destination_location = '' } = props

    const locations = [...track_locations].sort((a, b) => {
        const timeA = new Date(a.location_at).getTime();
        const timeB = new Date(b.location_at).getTime();
        return timeA - timeB;
      });

    if (destination_in) {
        locations.push(destination_location)
    }
    return locations ? (
        <div className="fr-overflow-y fr-bg-white">
            <div className={`${destination_in ? `fr-h-screen-50` : `fr-h-screen-30`}`}>
                <div className={`${destination_in ? `fr-mt-20-ne` : `fr-mt-5`}`}>
                    {locations.reverse().map((locationData, index) => {
                        const is_last_address = index === 0
                        return (
                            <div key={index}>
                                {is_last_address && !destination_in && <div className="fr-border-right-dashed fr-ml-7 fr-h-12 fr-w-px fr-mt-20-ne"></div>}
                                <div className="fr-flex fr-mt-05" key={index}>
                                    <div className='fr-mt-2-5'>
                                        {is_last_address && !destination_in ?
                                            <div className="fr-rounded-full fr-flex fr-items-center fr-justify-center fr-bg-truck-icon fr-h-4 fr-w-4 fr-p-px fr-ml-22px">
                                                <TrackingTruckIconSvg />
                                            </div> : <div className="fr-rounded-full fr-bg-blue fr-h-2 fr-w-2 fr-ml-27px"></div>}
                                        <div className={`fr-bg-blue fr-w-0-5 fr-mt-05 fr-ml-30 
                                        ${is_last_address && !destination_in ? `fr-h-89` : `fr-h-full`} `}>
                                        </div>
                                    </div>
                                    <div className={`${destination_in ? '' : is_last_address ?
                                        'fr-shadow-sm fr-rounded-lg fr-pr-1 fr-ml-2 fr-border-timeline' : ''}`}>
                                        <div className="fr-pl-4 fr-mt-3">
                                            <h2 className="fr-font-medium fr-text-sm fr-text-slate-800 fr-mb-3">{locationData.address}</h2>
                                            <p className="fr-font-normal fr-text-sm fr-text-slate-500 fr-mb-3">
                                                {locationData.location_at ? moment(locationData.location_at).format('DD-MMM HH:mm') : ''}
                                                {locationData.is_incorrect_location && (
                                                    <span className="fr-color-delay-update">&nbsp;&#40;Delayed update&#41;</span>
                                                )}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>)})}
                </div>
            </div>
        </div>
    ) : <></>
}