import React, { useEffect, useRef, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { CaretRightIcon } from "@phosphor-icons/react";
import * as styles from "./styles";
import { useLocalContent } from "~/sdks/LocalContent/context";
import { DEFAULT_RADIUS } from "~/sdks/LocalContent/constants";
import { getIdFromMarker } from "~/utils/map/getIdFromMarker";
import { TransitRoutes } from "~/components/TransitRoutes";
export function List({ pois, showPois = true, onSelect, }) {
    const { t } = useTranslation(["localContent", "common"]);
    const { activeMarker, markersData, distanceUnit, selectedPoiSubcategory, handleMarkerClick, showSchoolRatings, } = useLocalContent();
    const activeItemRef = useRef(null);
    useEffect(() => {
        if (activeItemRef.current) {
            activeItemRef.current.scrollIntoView({
                behavior: "smooth",
                block: "nearest",
            });
        }
    }, [activeMarker]);
    const isUsingLargerRadius = useMemo(() => {
        if (!markersData || Object.keys(markersData).length === 0) {
            return false;
        }
        const farMarker = Object.values(markersData)
            .flat()
            .find((marker) => {
            var _a;
            return typeof ((_a = marker === null || marker === void 0 ? void 0 : marker.proximity) === null || _a === void 0 ? void 0 : _a.linear_distance) === "number" &&
                marker.proximity.linear_distance > DEFAULT_RADIUS;
        });
        return typeof farMarker !== "undefined";
    }, [markersData]);
    const handleSelectMarkerOnMap = (poi) => () => {
        const markerId = getIdFromMarker(poi.lat, poi.lng, poi.name);
        handleMarkerClick({
            id: markerId,
            latitude: poi.lat,
            longitude: poi.lng,
            markers: [
                {
                    id: markerId,
                    latitude: poi.lat,
                    longitude: poi.lng,
                    name: poi.name,
                },
            ],
        });
        if (typeof onSelect !== "undefined" && selectedPoiSubcategory !== null) {
            onSelect(poi, selectedPoiSubcategory);
        }
    };
    if (pois.length === 0) {
        return null;
    }
    return (React.createElement("div", { className: styles.container, "data-testid": "score-poi-list-content" },
        React.createElement("p", { className: styles.title, "data-testid": "score-poi-list-title" }, !isUsingLargerRadius &&
            t("poiSearchRadius", {
                radius: distanceUnit === "imperial"
                    ? ((DEFAULT_RADIUS / 1000) * 0.621371).toFixed(1)
                    : (DEFAULT_RADIUS / 1000).toFixed(1),
                unit: t(`common:distance.${distanceUnit === "imperial" ? "mile" : "kilometer"}`),
            })),
        showPois && (React.createElement("ul", { className: styles.list }, pois.map((poi) => {
            var _a, _b, _c;
            const isActive = (activeMarker === null || activeMarker === void 0 ? void 0 : activeMarker.id) === getIdFromMarker(poi.lat, poi.lng, poi.name);
            return (React.createElement("li", { ref: isActive ? activeItemRef : null, className: styles.item, key: `${poi.lat}-${poi.lng}-${poi.name}`, "data-is-active": isActive },
                React.createElement("button", { "data-testid": "score-poi-list-item", onClick: handleSelectMarkerOnMap(poi), className: styles.button },
                    React.createElement("span", { className: styles.poi },
                        React.createElement("span", { className: styles.name, "data-testid": "score-poi-list-name" }, poi.name),
                        React.createElement(CaretRightIcon, { weight: "bold", className: styles.icon })),
                    typeof ((_a = poi === null || poi === void 0 ? void 0 : poi.school_attributes) === null || _a === void 0 ? void 0 : _a.types) !==
                        "undefined" && (React.createElement("div", { className: styles.schoolTypes }, (_c = (_b = poi === null || poi === void 0 ? void 0 : poi.school_attributes) === null || _b === void 0 ? void 0 : _b.types) === null || _c === void 0 ? void 0 :
                        _c.map((schoolType) => (React.createElement("span", { key: `score-poi-list-school-type-${poi.lat}-${poi.lng}-${poi.name}`, className: styles.badge }, schoolType))),
                        showSchoolRatings &&
                            typeof (poi === null || poi === void 0 ? void 0 : poi.rating) === "string" && (React.createElement("span", { className: styles.badge }, poi === null || poi === void 0 ? void 0 : poi.rating)))),
                    React.createElement(TransitRoutes, { keyPrefix: `poi-transit-routes-${poi.lat}-${poi.lng}`, routes: poi.routes, useLongName: selectedPoiSubcategory === "train_stations", className: styles.routes }))));
        })))));
}
//# sourceMappingURL=index.js.map