import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useRootElement } from "../../context";
import * as styles from "./styles";
import { METERS_TO_YARDS_CONVERSION_FACTOR, YARDS_PER_MILE, METERS_PER_KILOMETER, } from "~/sdks/LocalContent/constants";
export function Route({ isLoading = false }) {
    const { t } = useTranslation(["localContent", "common"]);
    const { commuteData, distanceUnit } = useRootElement();
    const durationString = useMemo(() => {
        if (!(commuteData === null || commuteData === void 0 ? void 0 : commuteData.duration))
            return null;
        const hours = Math.floor(commuteData.duration / 60 / 60);
        const minutes = Math.floor((commuteData.duration / 60) % 60);
        const minutesString = `${minutes} ${t("common:time.minute", { count: minutes })}`;
        if (hours === 0) {
            return minutesString;
        }
        if (minutes === 0) {
            return `${hours} ${t("common:time.hour", { count: hours })}`;
        }
        return `${hours} ${t("common:time.hour", { count: hours })} ${minutesString}`;
    }, [commuteData === null || commuteData === void 0 ? void 0 : commuteData.duration, t]);
    const distanceString = useMemo(() => {
        if (!(commuteData === null || commuteData === void 0 ? void 0 : commuteData.distance)) {
            return null;
        }
        // HereApi returns the length in metric
        let distanceInUnit = commuteData.distance;
        const isImperialSystem = distanceUnit === "imperial";
        if (isImperialSystem) {
            distanceInUnit *= METERS_TO_YARDS_CONVERSION_FACTOR;
        }
        const kilometersOrMiles = distanceInUnit /
            (isImperialSystem ? YARDS_PER_MILE : METERS_PER_KILOMETER);
        if (kilometersOrMiles < 1) {
            return `${Math.floor(distanceInUnit)} ${t(`common:distance.${isImperialSystem ? "yard" : "meter"}`)}`;
        }
        return `${Math.floor(kilometersOrMiles * 100) / 100} ${t(`common:distance.${isImperialSystem ? "mile" : "kilometer"}`)}`;
    }, [commuteData === null || commuteData === void 0 ? void 0 : commuteData.distance, t]);
    if (!commuteData && !isLoading) {
        return null;
    }
    return (React.createElement("div", { className: styles.container },
        isLoading && (React.createElement("span", { "data-testid": "commute-loading", className: styles.loading })),
        !isLoading && durationString && (React.createElement("p", { "data-testid": "commute-duration", className: styles.duration }, durationString.toLowerCase())),
        !isLoading && !durationString && (React.createElement("p", { "data-testid": "commute-duration", className: styles.duration }, t("commute.results.noRoute"))),
        !isLoading && distanceString && (React.createElement("p", { "data-testid": "commute-distance", className: styles.distance }, `${distanceString} - ${t("commute.results.fastestRoute")}`)),
        !isLoading && !distanceString && (React.createElement("p", { "data-testid": "commute-distance", className: styles.distance }, t("commute.results.trySuggestion")))));
}
//# sourceMappingURL=index.js.map