import React from "react";
import { Text } from "@local-logic/core/ui";
import { typeguardUtils } from "@local-logic/core/utils";
import { RootProps } from "./types";
import * as S from "./styles";

const Root = ({
  options: { data, type, activePOI, hoveredPOI },
  onChange,
}: RootProps) => (
  <S.List>
    {data?.map((poi, i) => (
      <S.Item
        key={`${poi.name}-${poi.lat}-${poi.lng}-${i}`}
        $isActive={activePOI === poi}
        $isHovered={hoveredPOI === poi}
        onClick={() => onChange && onChange({ type: "poi-click", data: poi })}
        onMouseOver={() =>
          onChange && onChange({ type: "poi-hover", data: poi })
        }
        onMouseLeave={() =>
          onChange && onChange({ type: "poi-hover", data: undefined })
        }
      >
        <Text variant="p" color="--ll-color-on-surface-variant1" noMargin>
          {poi.name}
        </Text>
        {typeguardUtils.poi.isSchool(poi, type) ? (
          <S.RouteContainer>
            {poi.school_attributes?.types?.map((t, i2) => (
              <S.Tag key={t} text={t} />
            ))}
          </S.RouteContainer>
        ) : (
          <S.RouteContainer>
            {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>
        )}
      </S.Item>
    ))}
  </S.List>
);

export { Root };