import React from "react"
import moment from "moment"
import { EmptyTrackingSvg } from "../assets/svg/EmptyTruckSvg"
import { FlagSvg } from "../assets/svg/FlagSvg"
import { TollHistoryList } from "./tollHistoryList"

/**
 * TruckLocationTimeLine component.
 *
 * Renders the truck location timeline UI based on the provided props.
 *
 * @param props - The component props.
 * @param props.source - The source location.
 * @param props.destination - The destination location.
 * @param props.location_at - The list of truck locations with address and timestamp.
 * @param props.created_at - The creation timestamp.
 * @param props.destination_in - The destination out timestamp.
 * @param props.destination_out - The destination out timestamp.
 */

export const TruckLocationTimeLine = (tripDetails:any) => {
    const { source, destination, destination_in, source_in, eta, trip_eta, trip_delay, correct_tracked_locations, destination_location } = tripDetails

    const location = correct_tracked_locations

    const _eta = eta ? moment(eta).format('DD-MMM HH:mm') : ''
    const _trip_eta = trip_eta ? moment(trip_eta).format('DD-MMM HH:mm') : ''
    const _destination_in = destination_in ? moment(destination_in).format('DD-MMM HH:mm') : ''
    const _source_in = source_in ? moment(source_in).format('DD-MMM HH:mm') : ''
    const handleTimeLeft = Math.abs(trip_delay)
    const day_str = `Day${handleTimeLeft === 1 ? '' : 's'}`

    return !source_in || location.length <= 0 ? (
        <div className="fr-flex fr-flex-col fr-items-center fr-text-center">
            <EmptyTrackingSvg />
            <p className="fr-text-gray-500 fr-text-center ">Tracking not yet started</p>
            <p className="fr-text-gray-500 fr-font-light fr-text-center">
                No list of locations found.
            </p>
        </div>
    ) : (
        <>
            <div className="fr-flex fr-flex-col">
                <div className="fr-p-4 fr-mt-2-5 fr-bg-light fr-bg-White-Smoke">
                    <div className="fr-flex fr-items-center fr-gap-4">
                        <FlagSvg color='#ED3C38' />
                        <div>
                            <p className="fr-truncate">{destination}</p>
                            <p className="fr-text-sm fr-font-normal">
                                {destination_in ? 'Reached' : 'Reaching'} on {_destination_in || _eta || _trip_eta}{' '}
                                &nbsp;
                                {trip_delay !== null ? <span
                                    className={`fr-text-xs ${trip_delay <= 0 ? 'fr-text-green' : 'fr-text-red'
                                        }`}
                                >
                                    &#40;
                                    {trip_delay == 0
                                        ? 'On time'
                                        : trip_delay > 0
                                            ? `${handleTimeLeft} ${day_str} delay`
                                            : `${handleTimeLeft} ${day_str} early`}
                                    &#41;
                                </span> : null}
                            </p>
                        </div>
                    </div>
                </div>
                <TollHistoryList track_locations={location} destination_in={destination_in} destination_location={destination_location}/>
                <div className="fr-rounded-md fr-p-4 fr-bg-White-Smoke">
                    <div className="fr-flex fr-items-center fr-gap-4">
                        <FlagSvg color="#27AE61" />
                        <div>
                            <p className="fr-truncate">{source}</p>
                            <p className="fr-text-sm fr-font-normal">Loaded on {_source_in}</p>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}