@let currentStop = _progressBarData?.currentStop;
@let totalMiles = _progressBarData?.totalMiles;
@let mileageInfo = _progressBarData?.mileageInfo;
@let mileagesPercent = _progressBarData?.mileagesPercent;
@let gpsTitle = _progressBarData?.gpsTitle;
@let gpsIcon = _progressBarData?.gpsIcon;
@let gpsInfo = _progressBarData?.gpsInfo;
@let gpsLocationIcon = _progressBarData?.gpsLocationIcon;
@let dispatchStatus = _progressBarData?.dispatchStatus;
@let currentLocation = _progressBarData?.currentLocation;

<div class="gps-progress-bar">
    @if (_progressBarData) {
        <div
            class="gps-progress-holder c-pointer d-flex align-items-center"
            [class.pe-none]="isDisabled"
            #t2="ngbPopover"
            [ngbPopover]="gpsDropdownPopover"
            [autoClose]="'outside'"
            container="body"
            [placement]="ePosition.BOTTOM_RIGHT"
            popoverClass="gps_dropdown_popover"
            triggers="manual"
            (click)="showDropdownMap(t2)"
        >
            <div
                class="c-pointer"
                (mouseenter)="hoveredGpsIcon = true"
                (mouseleave)="hoveredGpsIcon = false"
            >
                <div
                    class="gps-icon d-flex"
                    [innerHTML]="gpsIcon! | safeHtml"
                ></div>
            </div>

            @if (!hoveredGpsIcon) {
                <div class="gps-progress-text flex-1">
                    <div class="mileage-gps d-flex justify-content-between">
                        <div
                            class="user-select-none text-size-11 text-color-black-2 ca-font-bold"
                        >
                            {{ hoveredGpsTitle ?? gpsTitle }}
                        </div>
                        <div
                            class="user-select-none text-size-11 text-color-black-2 ca-font-regular"
                        >
                            {{ hoveredMileageInfo ?? mileageInfo }}
                        </div>
                    </div>
                    <div class="mileage-gps d-flex">
                        <div
                            class="gps-timeline flex-1 background-dark-2 position-relative h-2 m-r-8"
                        >
                            @let progressLineWidth =
                                currentPosition + eUnit.PERCENTAGE_SIGN;

                            <div
                                class="gps-timeline-active background-muted position-absolute left-0 h-2"
                                [ngStyle]="{ width: progressLineWidth }"
                            ></div>

                            @for (
                                stop of gpsStopsWithoutCurrentLocation;
                                let i = $index;
                                track i
                            ) {
                                @let stopColorClass =
                                    stop.type === 'pickup'
                                        ? 'background-green-3'
                                        : stop.type === 'delivery'
                                          ? 'background-orange-4'
                                          : 'background-gray-20';

                                <div
                                    class="stop-marker translate-middle-y w-12 h-12 c-pointer d-flex align-items-center justify-content-center"
                                    [style.--position]="stop.position"
                                    ngbTooltip
                                    (mouseenter)="hoverStop(stop)"
                                    (mouseleave)="leaveStop()"
                                    [tooltipBackground]="eColor.BLACK"
                                    [mainCaTooltip]="stop?.location ?? ''"
                                    [position]="ePosition.BOTTOM"
                                >
                                    <div
                                        class="w-4 h-6 br-1"
                                        [ngClass]="stopColorClass"
                                    ></div>
                                </div>
                            }

                            @if (gpsLocationIcon) {
                                @let currentLocationTooltip =
                                    currentLocation?.location ?? null;

                                <div
                                    class="stop-marker c-pointer w-12 h-12 d-flex align-items-center justify-content-center translate-middle-y"
                                    (mouseenter)="hoverCurrentLocation()"
                                    (mouseleave)="leaveStop()"
                                    [style.--position]="currentPosition"
                                    ngbTooltip
                                    [tooltipBackground]="eColor.BLACK"
                                    [mainCaTooltip]="
                                        currentLocationTooltip || ''
                                    "
                                    [disableTooltip]="!currentLocationTooltip"
                                    [position]="ePosition.BOTTOM"
                                    [innerHTML]="gpsLocationIcon | safeHtml"
                                ></div>
                            }
                        </div>

                        <div
                            class="user-select-none text-size-11 text-color-black ca-font-bold w-29 text-right"
                        >
                            {{ mileagesPercent }}
                        </div>
                    </div>
                </div>
            } @else if (gpsInfo) {
                <div
                    class="gps_info_hold d-flex flex-column flex-1 justify-content-center"
                >
                    <div
                        class="moving_side text-size-11 ca-font-bold user-select-none text-uppercase"
                        [ngClass]="gpsInfo.gpsHeadingColor"
                    >
                        {{ gpsInfo.gpsHeading }}
                    </div>

                    <div
                        class="moving_time text-size-11 text-color-black-2 ca-font-medium"
                    >
                        {{ gpsInfo.gpsTime }}
                    </div>
                </div>
            }
        </div>
    }

    <ng-template #gpsDropdownPopover let-data="data">
        <div class="main_dropdown_holder d-flex">
            <div class="flex-1" [ngStyle]="{ 'width.px': mapWidth ?? 340 }">
                <app-ca-map [data]="mapData"></app-ca-map>
            </div>

            <div
                class="gps_all_hold"
                [ngStyle]="{ 'width.px': dropdownWidth ?? 238 }"
            >
                <div
                    class="gps_header d-flex align-items-center"
                    (mouseenter)="hoveredGpsIcon = true"
                    (mouseleave)="hoveredGpsIcon = false"
                >
                    <div class="c-pointer">
                        <div
                            class="gps-icon"
                            [innerHTML]="gpsIcon! | safeHtml"
                        ></div>
                    </div>

                    <div
                        class="gps_info_hold d-flex flex-column justify-content-center"
                    >
                        <div
                            class="moving_side text-size-11 ca-font-bold user-select-none text-uppercase"
                            [ngClass]="gpsInfo?.gpsDropdownHeadingColor"
                        >
                            {{ gpsInfo?.gpsHeading }}
                        </div>

                        @if (currentLocation?.location) {
                            <div
                                class="text-size-11 text-color-white m-t--2"
                            >
                                {{ currentLocation?.location }}
                            </div>
                        }
                    </div>
                </div>

                <div class="gps_info_border"></div>

                <div class="gps_progress_hold">
                    <div
                        class="gps_progress_hold_inner d-flex flex-column justify-content-between align-items-start"
                    >
                        <div class="progress_line">
                            <div
                                class="progress_inner_line"
                                [ngStyle]="{
                                    height: gpsIconTopPosition + '%',
                                }"
                            ></div>

                            @if (!currentStop) {
                                <ng-container
                                    *ngTemplateOutlet="
                                        gpsLocationIconTemplate;
                                        context: {
                                            topPosition: gpsIconTopPosition,
                                        }
                                    "
                                ></ng-container>
                            }
                        </div>

                        @for (
                            stop of gpsStopsWithoutCurrentLocation;
                            let stopIndex = $index;
                            track stopIndex
                        ) {
                            <div class="progress_inner">
                                <div class="progress_header d-flex">
                                    <div
                                        class="progress_header_inside d-flex flex-1"
                                    >
                                        <div
                                            class="progress_icon d-flex justify-content-center align-items-center"
                                        >
                                            @let stopNumberColorClass =
                                                stop.type === 'pickup'
                                                    ? 'text-color-green-4'
                                                    : stop.type === 'delivery'
                                                      ? 'text-color-orange-3'
                                                      : 'text-color-muted';

                                            <div
                                                class="progress-stop-number text-size-14 text-center user-select-none ca-font-bold"
                                                [ngClass]="stopNumberColorClass"
                                            >
                                                {{ stop.stopNumber }}
                                            </div>
                                        </div>

                                        <div
                                            class="progress_info_hold d-flex flex-column m-r-4"
                                        >
                                            <div
                                                class="d-flex align-items-center"
                                            >
                                                @let textColorClass =
                                                    stop.isAtStop ||
                                                    currentPosition <
                                                        stop.position
                                                        ? 'text-color-white'
                                                        : 'text-color-muted';

                                                <div
                                                    class="text-size-11 ca-font-semi-bold m-r-4"
                                                    [ngClass]="textColorClass"
                                                >
                                                    {{ stop?.location }}
                                                </div>

                                                @if (
                                                    stop.isAtStop &&
                                                    gpsLocationIcon
                                                ) {
                                                    <ng-container
                                                        *ngTemplateOutlet="
                                                            gpsLocationIconTemplate
                                                        "
                                                    ></ng-container>
                                                } @else if (
                                                    currentPosition >=
                                                    stop.position
                                                ) {
                                                    <svg-icon
                                                        class="d-flex svg-size-10 svg-fill-blue-19"
                                                        [src]="
                                                            sharedSvgRoutes.CHECK_ICON
                                                        "
                                                    ></svg-icon>
                                                }
                                            </div>

                                            @if (!stop.isAtStop) {
                                                @if (stop.date) {
                                                    <div
                                                        class="progress_time text-size-11 text-color-white-2 ca-font-regular"
                                                        [ngClass]="{
                                                            'text-color-grey':
                                                                currentPosition >=
                                                                    stop.position &&
                                                                !stop.isAtStop,
                                                        }"
                                                    >
                                                        {{
                                                            stop.date
                                                                | date
                                                                    : eDateTimeFormats.MM_DD_YY
                                                        }}
                                                    </div>
                                                }

                                                @if (stop.time) {
                                                    <div
                                                        class="progress_time text-size-11 text-color-white-2 ca-font-regular"
                                                        [ngClass]="{
                                                            'text-color-grey':
                                                                currentPosition >=
                                                                    stop.position &&
                                                                !stop.isAtStop,
                                                        }"
                                                    >
                                                        {{
                                                            stop.time
                                                                | date
                                                                    : eDateTimeFormats.HH_MM_AA
                                                        }}
                                                    </div>
                                                }
                                            } @else {
                                                <div
                                                    class="progress_time text-size-11 text-color-orange-3 ca-font-bold"
                                                >
                                                    {{ dispatchStatus }}
                                                </div>

                                                @if (stop.currentWaitTime) {
                                                    <div
                                                        class="progress_time text-size-11 text-color-white-2"
                                                    >
                                                        {{
                                                            stop.currentWaitTime
                                                                | convertMinutesToHours
                                                        }}
                                                    </div>
                                                }
                                            }
                                        </div>
                                    </div>

                                    <div
                                        class="progress-leg-miles-text text-size-11 text-color-white"
                                        [ngClass]="{
                                            'text-color-grey':
                                                currentPosition >=
                                                    stop.position &&
                                                !stop.isAtStop,
                                            'ca-font-bold': stopIndex === 0,
                                        }"
                                    >
                                        {{
                                            stopIndex === 0
                                                ? 'LEG mi'
                                                : stop?.legMiles
                                                  ? '+' + stop.legMiles
                                                  : '+' + 0
                                        }}
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>

                <div class="gps_info_border"></div>

                <div class="gps_complete_hold">
                    <div class="gps_complete_row d-flex">
                        <div class="flex-1 text-size-11 text-color-white">
                            {{ staticConstant.completed }}
                        </div>

                        <div class="text-size-11 text-color-white">
                            {{ staticConstant.total }}
                        </div>
                    </div>

                    <div class="gps_complete_second_row d-flex">
                        <div
                            class="flex-1 text-size-11 text-color-blue-19 ca-font-bold"
                        >
                            {{ currentPosition }}{{ staticConstant.percentage }}
                        </div>

                        <div class="text-size-11 text-color-white ca-font-bold">
                            {{
                                totalMiles
                                    | number
                                        : eThousandSeparatorFormat.DECIMAL_FORMAT
                            }}
                            {{ staticConstant.miles }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</div>

<ng-template #gpsLocationIconTemplate let-topPosition="topPosition">
    @if (gpsLocationIcon) {
        <div
            class="d-flex align-items-center justify-content-center"
            [class.moving-gps]="!!topPosition"
            [style.top]="topPosition + '%'"
            [innerHTML]="gpsLocationIcon | safeHtml"
        ></div>
    }
</ng-template>