import coreUtils from "@opentripplanner/core-utils";
import { Defaults, parseOTP2Minute } from "@opentripplanner/itinerary-body";
import {
  GradationMap,
  Leg,
  LegIconComponent,
  LegHeadingProp
} from "@opentripplanner/types";
import React, { ReactElement } from "react";
import { FormattedMessage } from "react-intl";

import AccessibilityAnnotation from "./accessibility-annotation";
import * as S from "./styled";
import { defaultMessages, strongText } from "./util";

const { getCompanyForNetwork } = coreUtils.itinerary;

interface Props extends LegHeadingProp {
  accessibilityScoreGradationMap?: GradationMap;
  leg: Leg;
  LegIcon: LegIconComponent;
}

export default function TNCLeg({
  accessibilityScoreGradationMap,
  leg,
  LegIcon,
  headingAs
}: Props): ReactElement {
  const { rideHailingEstimate } = leg;
  if (!rideHailingEstimate) return null;

  return (
    <S.Leg>
      <AccessibilityAnnotation
        accessibilityScoreGradationMap={accessibilityScoreGradationMap}
        grayscale
        leg={leg}
        LegIcon={LegIcon}
      />
      <S.LegBody>
        <S.LegHeader as={headingAs}>
          <FormattedMessage
            defaultMessage={
              defaultMessages["otpUi.PrintableItinerary.TncLeg.header"]
            }
            description="Summary text for TNC leg"
            id="otpUi.PrintableItinerary.TncLeg.header"
            values={{
              company: getCompanyForNetwork(rideHailingEstimate.provider.id)
                ?.label,
              place: leg.to.name,
              strong: strongText
            }}
          />
        </S.LegHeader>
        <S.LegDetails>
          {typeof leg?.rideHailingEstimate?.arrival === "string" && (
            <S.LegDetail>
              <FormattedMessage
                defaultMessage={
                  defaultMessages[
                    "otpUi.PrintableItinerary.TncLeg.estimatedWaitTime"
                  ]
                }
                description="Describes the estimated TNC wait time."
                id="otpUi.PrintableItinerary.TncLeg.estimatedWaitTime"
                values={{
                  duration: (
                    <Defaults.Duration
                      seconds={
                        parseInt(
                          parseOTP2Minute(leg.rideHailingEstimate.arrival),
                          10
                        ) * 60
                      }
                    />
                  ),
                  strong: strongText
                }}
              />
            </S.LegDetail>
          )}
          <S.LegDetail>
            <FormattedMessage
              defaultMessage={
                defaultMessages[
                  "otpUi.PrintableItinerary.TncLeg.estimatedTravelTime"
                ]
              }
              description="Describes the estimated TNC travel time."
              id="otpUi.PrintableItinerary.TncLeg.estimatedTravelTime"
              values={{
                duration: <Defaults.Duration seconds={leg.duration} />,
                strong: strongText
              }}
            />
          </S.LegDetail>
        </S.LegDetails>
      </S.LegBody>
    </S.Leg>
  );
}