import React from "react"
import util from "../lib/util"
import { Badge } from "../lib/common/badge"
import { Progress } from "../lib/common/progressBar"
import moment from "moment"
import { TrackingGifSvg } from "../assets/svg/trackingGif"


const StatusBadge = (props: { color: string, label: string }) => {
    return (
        <div className="fr-flex fr-items-center fr-gap-1 fr-w-max-30">
            <Badge color={props.color} />
            <p className="fr-truncate fr-text-base fr-font-semibold">{props.label}</p>
        </div>
    )
}

export const TrackingTripDetails = (tripDetails:any) => {
    const { kilometer,trip_delay,eta,last_location_address, last_location_at, source, destination, source_in, locations, remaining_kilometer,isDestinationReached, destination_in } = tripDetails

    const travelledKm = destination_in ? 100 : util.percentageCalculator(kilometer, remaining_kilometer)
    const handleTimeLeft = Math.abs(trip_delay)
    const _eta = eta ? ` | ETA : ${moment(eta).format('DD-MMM')}` : ''
    return (
        <>
            <div className="fr-flex fr-justify-between fr-items-center fr-my-2 fr-pb-6px">
                <StatusBadge color="#43A047" label={source} />
                <div className="fr-px-4 fr-w-full">
                    <div className="fr-flex fr-w-full">
                        <div className="fr-w-full fr-h-05 fr-bg-dark-light fr-mt-1">
                        </div>
                        <span className="fr-arrow-left"></span>
                    </div>
                </div>
                <StatusBadge color="#E53935" label={destination} />
            </div>
            <div className="fr-flex fr-justify-between fr-pb-3">
                <div>
                    {trip_delay !== null ? <p><span
                        className={`fr-text-xs ${trip_delay <= 0 ? 'fr-text-green' : 'fr-text-red'
                            }`}
                    >
                        {trip_delay > 0
                            ? `${handleTimeLeft}D Delay`
                            : 'On time'}
                    </span>{_eta}</p> : null}
                    <div className="fr-flex fr-items-center">
                        <TrackingGifSvg /><p>{last_location_address ?? ''}</p><p>{last_location_at ? ` , ${moment(last_location_at).format('DD-MMM HH:mm')}` : ''}</p>
                    </div>
                </div>
                <div className="fr-text-right ">
                    <p>Total : {kilometer} km</p>
                    <p>Remaining: {isDestinationReached ? 0 : remaining_kilometer} km</p>
                </div>
            </div>
            {(travelledKm !== 0 && source_in && source_in < locations) && (
                <div className="fr-pb-4">
                    <Progress done={travelledKm} />
                </div>
            )}
            <div className="fr-flex fr-justify-between fr-items-center fr-border-dashed-padding"></div>
        </>
    )
}