import React from "react";
import {
  Text,
  Tag,
  Link,
  theme,
  Spacer,
  SVG,
  Button,
} from "@local-logic/core/ui";
import { primitiveUtils, typeguardUtils } from "@local-logic/core/utils";
import Walking from "~/assets/icons/walking.svg";
import Driving from "~/assets/icons/directions_car.svg";
import { poiIcons } from "~/constants/pois";
import useTranslator from "~/hooks/useTranslator";
import { translations as poiTranslations } from "~/localization/translation-packs/pois";
import { translations as schoolTranslations } from "~/localization/translation-packs/schools";
import { translations as globalTranslations } from "~/localization/translation-packs/global";
import { useRootElement } from "../context";
import * as S from "./styles";

export const Content = () => {
  const {
    options: {
      poi,
      side,
      collisionPadding,
      type,
      walkingTime,
      drivingTime,
      showDriveTime,
      calculateRoute,
    },
  } = useRootElement();
  const { translations } = useTranslator([
    poiTranslations,
    schoolTranslations,
    globalTranslations,
  ]);
  const poiType =
    type === "high_schools" || type === "primary_schools" ? "school" : "poi";

  const mapLanguages = (languages: ("en" | "fr" | "es" | string)[]) =>
    languages.map((l) => {
      switch (l) {
        case "en":
          return translations.ENGLISH;
        case "fr":
          return translations.FRENCH;
        case "es":
          return translations.SPANISH;
        default:
          return l;
      }
    });

  const SchoolText = (key: string, value: string) => (
    <>
      <S.SchoolText>{key}: </S.SchoolText>
      <S.SchoolText color={theme["--ll-color-on-background-variant1"]}>
        {primitiveUtils.string.capitalize(value)}
      </S.SchoolText>
    </>
  );

  const commuteContent = () => {
    let commuteType = walkingTime;
    let commuteIcon = Walking;

    if (showDriveTime) {
      commuteType = drivingTime;
      commuteIcon = Driving;
    }

    return (
      <>
        <SVG
          SVGElement={commuteIcon}
          height={20}
          width={20}
          fill={theme["--ll-color-on-background"]}
        />
        <Text variant="p" noMargin>
          {commuteType}
        </Text>
      </>
    );
  };

  return (
    <S.Content side={side} collisionPadding={collisionPadding}>
      <Text variant="h5" noMargin weight="--ll-font-weight-bold">
        {poi.name}
      </Text>
      <Spacer vertical spacing="--ll-spacing-xx-small" />
      {poi.address && (
        <Text variant="p" noMargin>
          {poi.address}
        </Text>
      )}
      <Spacer vertical spacing="--ll-spacing-xx-small" />
      {poi.url && (
        <>
          <Link lineClamp={2} href={poi.url}>
            {poi.url}
          </Link>
          <Spacer vertical spacing="--ll-spacing-xx-small" />
        </>
      )}
      {typeguardUtils.poi.isSchool(poi, poiType) ? (
        <S.SchoolTextContainer>
          {poi.school_attributes?.grades &&
            SchoolText(
              translations.SCHOOL_LEVELS,
              poi.school_attributes.grades
            )}
          {poi.school_attributes?.languages &&
            SchoolText(
              translations.SCHOOL_LANGUAGES,
              mapLanguages(poi.school_attributes.languages).join(", ")
            )}
          {poi.school_attributes?.types &&
            SchoolText(
              translations.SCHOOL_TYPE,
              poi.school_attributes.types.join(", ")
            )}
          {poi.school_board_attributes?.name &&
            poi.school_board_attributes?.url && (
              <>
                <S.SchoolText>{translations.SCHOOL_BOARD}: </S.SchoolText>
                <Link href={poi.school_board_attributes.url}>
                  {primitiveUtils.string.capitalize(
                    poi.school_board_attributes.name
                  )}
                </Link>
              </>
            )}
        </S.SchoolTextContainer>
      ) : (
        poi.routes && (
          <S.RouteContainer>
            <SVG
              SVGElement={poiIcons[type]}
              height={20}
              width={20}
              fill={theme["--ll-color-on-background"]}
            />
            {poi.routes?.map((route, i2) => (
              <S.Tag
                key={route.short_name + i2}
                text={route.short_name}
                backgroundColor={route.route_color}
                textColor={route.text_color}
              />
            ))}
          </S.RouteContainer>
        )
      )}
      <Tag
        text={translations[type]}
        size="medium"
        backgroundColor={theme["--ll-color-primary"]}
        textColor={theme["--ll-color-on-primary"]}
      />

      {calculateRoute && (
        <>
          <Spacer vertical spacing="--ll-spacing-small" />
          <S.RouteContainer justify={walkingTime ? "space-between" : "end"}>
            {walkingTime && (
              <S.RouteContainer>{commuteContent()}</S.RouteContainer>
            )}
            <Button size="small" variant="contained" onClick={calculateRoute}>
              {translations.CALCULATE}
            </Button>
          </S.RouteContainer>
        </>
      )}
    </S.Content>
  );
};