import React, { useMemo, useLayoutEffect, useRef, useState } from "react";
import { Header } from "../Header";
import { Map } from "../Map";
import { Sidebar } from "../Sidebar";
import { ScoresPillList } from "../ScoresPillList";
import { ScoreDetailsSlider } from "../ScoreDetailsSlider";
import { CommuteCalculator } from "../CommuteCalculator";
import * as styles from "./styles";
import { SCORE_POI_CATEGORIES } from "~/sdks/LocalContent/constants";
import { Attribution } from "~/components/Attribution";
import { useResponsiveBreakpoints } from "~/hooks/useResponsiveBreakpoints";
import { useLocalContent } from "~/sdks/LocalContent/context";
const SCORE_VALUE_THRESHOLD = 0.1;
export function Content() {
    var _a, _b, _c;
    const breakpoints = useResponsiveBreakpoints();
    const mobileScoreDetailsSliderRef = useRef(null);
    const [mobileCommuteButtonBottomOffset, setMobileCommuteButtonBottomOffset] = useState(styles.menuMobileBottomOffset);
    const { isCommuteCalculatorOpen, isScoresLoading, isMarkersLoading, isSidebarExpanded, hideAttribution, scoresMenu, scoresData, activeScore, activeScoreData, activeCategory, activeCategoryData, markersData, centerMarker, hideScoresList, locale, handleSelectScore, handleToggleIsSidebarExpanded, } = useLocalContent();
    const isMobile = useMemo(() => !breakpoints.sm, [breakpoints.sm]);
    const filteredScoresMenu = useMemo(() => (Object.assign(Object.assign({}, scoresMenu), { categories: scoresMenu.categories
            .map(([categoryKey, categoryValue]) => [
            categoryKey,
            Object.assign(Object.assign({}, categoryValue), { scores: categoryValue.scores.filter(([scoreKey, scoreValue]) => {
                    var _a;
                    // It pertains to the "hideScores" option in the SDK
                    // https://docs.locallogic.co/docs/sdks/widgets/local-content#sdkoptions
                    if ((hideScoresList.includes(scoreKey) ||
                        scoreValue.hide) &&
                        SCORE_POI_CATEGORIES[scoreKey].length === 0) {
                        return false;
                    }
                    return (typeof ((_a = scoresData === null || scoresData === void 0 ? void 0 : scoresData[scoreKey]) === null || _a === void 0 ? void 0 : _a.value) !== "undefined" &&
                        scoresData[scoreKey].value > SCORE_VALUE_THRESHOLD);
                }) }),
        ])
            .filter(([, categoryValue]) => Array.isArray(categoryValue.scores) &&
            categoryValue.scores.length > 0) })), [scoresMenu, scoresData]);
    const commuteCalculatorMenuStyles = useMemo(() => isMobile ? { bottom: `${mobileCommuteButtonBottomOffset}px` } : undefined, [isMobile, mobileCommuteButtonBottomOffset]);
    useLayoutEffect(() => {
        const currentRef = mobileScoreDetailsSliderRef === null || mobileScoreDetailsSliderRef === void 0 ? void 0 : mobileScoreDetailsSliderRef.current;
        const handleRefTransition = () => {
            if (typeof (currentRef === null || currentRef === void 0 ? void 0 : currentRef.offsetHeight) !== "undefined") {
                setMobileCommuteButtonBottomOffset(((currentRef === null || currentRef === void 0 ? void 0 : currentRef.offsetHeight) || 0) +
                    styles.menuMobileBottomOffsetExpanded);
            }
            else {
                setMobileCommuteButtonBottomOffset(styles.menuMobileBottomOffset);
            }
        };
        if (currentRef && !isCommuteCalculatorOpen) {
            currentRef.addEventListener("transitionrun", handleRefTransition);
            currentRef.addEventListener("transitionend", handleRefTransition);
        }
        else if (mobileCommuteButtonBottomOffset !== styles.menuMobileBottomOffset &&
            !isCommuteCalculatorOpen) {
            setMobileCommuteButtonBottomOffset(styles.menuMobileBottomOffset);
        }
        return () => {
            currentRef === null || currentRef === void 0 ? void 0 : currentRef.removeEventListener("transitionrun", handleRefTransition);
            currentRef === null || currentRef === void 0 ? void 0 : currentRef.removeEventListener("transitionend", handleRefTransition);
        };
    }, [isCommuteCalculatorOpen, mobileCommuteButtonBottomOffset, activeScore]);
    return (React.createElement("div", { className: styles.container },
        isMobile && filteredScoresMenu.categories.length > 0 && (React.createElement(Header, { scores: filteredScoresMenu })),
        React.createElement(Map, null,
            isMobile && activeCategory && (React.createElement(React.Fragment, null,
                React.createElement(ScoresPillList, { scores: (_a = filteredScoresMenu.categories
                        .find(([key]) => key === activeCategory)) === null || _a === void 0 ? void 0 : _a[1].scores.flatMap(([scoreKey]) => scoreKey), backgroundColor: (_b = activeCategoryData === null || activeCategoryData === void 0 ? void 0 : activeCategoryData.colors) === null || _b === void 0 ? void 0 : _b.background, fillColor: (_c = activeCategoryData === null || activeCategoryData === void 0 ? void 0 : activeCategoryData.colors) === null || _c === void 0 ? void 0 : _c.fill }),
                React.createElement(ScoreDetailsSlider, { ref: mobileScoreDetailsSliderRef }))),
            !isMobile && filteredScoresMenu.categories.length > 0 && (React.createElement(Sidebar.Root, { isExpanded: isSidebarExpanded, isScoresLoading: isScoresLoading, isMarkersLoading: isMarkersLoading, activeScore: activeScore, activeScoreData: activeScoreData, markersData: markersData, onSelectScore: handleSelectScore, onToggleIsExpanded: handleToggleIsSidebarExpanded },
                React.createElement(Sidebar.Header, { title: scoresMenu === null || scoresMenu === void 0 ? void 0 : scoresMenu.title }),
                React.createElement(Sidebar.Content, null, filteredScoresMenu.categories.map(([categoryKey, category]) => (React.createElement(Sidebar.Category, { key: `category-${categoryKey}`, categoryKey: categoryKey }, category.scores.map(([scoreKey, _score]) => {
                    var _a, _b;
                    return (React.createElement(Sidebar.Score, { key: `sidebar-score-${categoryKey}-${scoreKey}`, scoreKey: scoreKey, backgroundColor: (_a = category.colors) === null || _a === void 0 ? void 0 : _a.background, fillColor: (_b = category.colors) === null || _b === void 0 ? void 0 : _b.fill }));
                }))))),
                React.createElement(Sidebar.Slider, null,
                    React.createElement(Sidebar.ScoreDetails, null)))),
            React.createElement(CommuteCalculator.Root, { isDisabled: typeof centerMarker === "undefined" },
                React.createElement("div", { className: styles.menu, style: commuteCalculatorMenuStyles },
                    !isCommuteCalculatorOpen && React.createElement(CommuteCalculator.Trigger, null),
                    !isMobile && (React.createElement(CommuteCalculator.Card, null,
                        React.createElement(CommuteCalculator.Header, null),
                        React.createElement(CommuteCalculator.Form, null)))),
                isMobile && (React.createElement(CommuteCalculator.Slider, null,
                    React.createElement(CommuteCalculator.Header, { hideCloseButton: true }),
                    React.createElement(CommuteCalculator.Form, null))))),
        React.createElement(Attribution, { sdkName: "local-content", locale: locale, isHidden: hideAttribution })));
}
//# sourceMappingURL=index.js.map