import React from "react"
import moment from "moment";
import util from "../lib/util";

interface TrackingStatusDetailsProps {
    tripDetails:any , 
    handleTrackButton:any
}

const TrackingStatus = (props: { api_requested_at: string, last_location_at: string, last_location_address: string, handleTrackButton: any , is_frequent_tracking:boolean}) => {
    const { api_requested_at, last_location_address, last_location_at } = props
    return (
        <>
            <div className="fr-flex fr-justify-between fr-items-center fr-border-dashed-padding fr-padding-6-0px"></div>
            <div>
                <p className="fr-mb-3">Last tracked:
                    <span className="fr-text-md fr-font-light fr-ml-1">
                        {util.formatDate(api_requested_at)}
                    </span>
                </p>
                <p className="fr-mb-3">Last Location:
                    <span className="fr-text-md fr-font-light fr-ml-1">
                        {util.formatDate(last_location_at)}
                    </span>
                    <span className="text-sm fr-font-light fr-text-primary">
                        ,&nbsp;{last_location_address}
                    </span>
                </p>
            </div>
        </>
    )
}

export const TrackingStatusDetails = ({tripDetails , handleTrackButton} : TrackingStatusDetailsProps) => {
    const { driver_mobile, eway_expiry, api_requested_at, last_location_address, last_location_at, destination_in: isDestinationReached , is_frequent_tracking} = tripDetails

    return (
        <div>
            <div className="fr-flex fr-justify-between fr-items-center fr-mt-2">
                <div className="fr-trip-status-details">
                    <p className="fr-text-slate-500">DRIVER:&nbsp;</p>
                    <p className="fr-text-base fr-font-semibold">{driver_mobile}</p>
                </div>
                <div className="fr-trip-status-details">
                    <p className="fr-text-slate-500">E-WAY EXPIRY:&nbsp;</p>
                    <p className="fr-text-base fr-font-semibold"> {eway_expiry ? moment(eway_expiry).format('DD-MMM-YY') : '-'}</p>
                </div>
            </div>
            {!isDestinationReached ?
                <TrackingStatus
                    api_requested_at={api_requested_at}
                    last_location_at={last_location_at}
                    last_location_address={last_location_address}
                    handleTrackButton={handleTrackButton} 
                    is_frequent_tracking={is_frequent_tracking} />
                : <></>}
            <div className="fr-flex fr-justify-between fr-items-center fr-border-dashed-padding"></div>
        </div>
    )
}