/**
 * Renders a single popular request item, switching display by request mode.
 *
 * Angular equivalent: `PopularRequestComponent` + the per-mode components
 * (ArrivalRequestComponent, DepartureRequestComponent,
 * FlightNumberRequestComponent, RouteRequestComponent).
 *
 * In React, these are inlined as a single component with a switch,
 * since each mode branch is 2-3 lines of JSX.
 */

import { useTranslation } from "@/i18n/provider.js";
import { useCityName } from "@/shared/hooks/useDictionaries.js";
import { RequestInfo } from "./RequestInfo.js";
import "./PopularRequestItem.scss";
import type { PopularRequest } from "../types.js";

export interface PopularRequestItemProps {
  request: PopularRequest;
  onClick: (request: PopularRequest) => void;
}

export function PopularRequestItem({
  request,
  onClick,
}: PopularRequestItemProps): JSX.Element {
  const { t } = useTranslation();

  const handleClick = () => {
    onClick(request);
  };

  switch (request.mode) {
    case "Arrival": {
      return (
        <ArrivalDisplay
          label={t("BOARD.ARRIVAL")}
          cityCode={request.arrival}
          onClick={handleClick}
        />
      );
    }
    case "Departure": {
      return (
        <DepartureDisplay
          label={t("BOARD.DEPARTURE")}
          cityCode={request.departure}
          onClick={handleClick}
        />
      );
    }
    case "FlightNumber": {
      const flightInfo = `${request.carrier}\u00a0${request.flightNumber}`;
      return (
        <div className="popular-request">
          {t("BOARD.FLIGHT_NUMBER")}:{" "}
          <RequestInfo onClick={handleClick}>{flightInfo}</RequestInfo>
        </div>
      );
    }
    case "Route":
    case "RouteWithBack": {
      const label = getRouteLabel(request.mode, request.type, t);
      return (
        <RouteDisplay
          label={label}
          departureCode={request.departure}
          arrivalCode={request.arrival}
          onClick={handleClick}
        />
      );
    }
  }
}

// ---------------------------------------------------------------------------
// Internal sub-components
// ---------------------------------------------------------------------------

function ArrivalDisplay({
  label,
  cityCode,
  onClick,
}: {
  label: string;
  cityCode: string;
  onClick: () => void;
}): JSX.Element {
  const cityName = useCityName(cityCode);
  return (
    <div className="popular-request">
      {label}: <RequestInfo onClick={onClick}>{cityName}</RequestInfo>
    </div>
  );
}

function DepartureDisplay({
  label,
  cityCode,
  onClick,
}: {
  label: string;
  cityCode: string;
  onClick: () => void;
}): JSX.Element {
  const cityName = useCityName(cityCode);
  return (
    <div className="popular-request">
      {label}: <RequestInfo onClick={onClick}>{cityName}</RequestInfo>
    </div>
  );
}

function RouteDisplay({
  label,
  departureCode,
  arrivalCode,
  onClick,
}: {
  label: string;
  departureCode: string;
  arrivalCode: string;
  onClick: () => void;
}): JSX.Element {
  const departureName = useCityName(departureCode);
  const arrivalName = useCityName(arrivalCode);
  return (
    <div className="popular-request">
      {label}:{" "}
      <RequestInfo onClick={onClick}>
        {departureName} - {arrivalName}
      </RequestInfo>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------

function getRouteLabel(
  mode: "Route" | "RouteWithBack",
  type: string,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  t: (key: string) => any,
): string {
  if (mode === "RouteWithBack") {
    return t("SCHEDULE.SCHEDULE-FULL-ROUTE") as string;
  }
  return type === "Onlineboard"
    ? (t("BOARD.ROUTE") as string)
    : (t("SCHEDULE.SCHEDULE-OUTBOUND") as string);
}
