import React, { useState, useEffect, forwardRef } from "react";
import { BottomSlider } from "../BottomSlider";
import { Score } from "../Score";
import { ScoreComparison } from "../ScoreComparison";
import { ScoreText } from "../ScoreText";
import { ScorePoiList } from "../ScorePoiList";
import * as styles from "./styles";
import { useLocalContent } from "~/sdks/LocalContent/context";
/**
 * This component is meant to be displayed on mobile devices only. It shows detailed
 * information about the selected score in a slider that appears from the bottom
 * of the screen.
 */
export const ScoreDetailsSlider = forwardRef((_, forwardedRef) => {
    var _a, _b, _c;
    const { isCommuteCalculatorOpen, activeScore, activeScoreData, activeCategoryData, isMarkersLoading, markersData, } = useLocalContent();
    const [isExpanded, setIsExpanded] = useState(false);
    useEffect(() => {
        setIsExpanded(false);
    }, [activeScore]);
    const handleOnExpandContractClick = (e) => {
        // Sanity checks
        if (!activeScore ||
            !forwardedRef ||
            "current" in forwardedRef === false) {
            return;
        }
        // When the slider is expanded, ignore clicks on the button inside the slider
        // This would allow for clicking on actions inside the slider without collapsing it
        if (isExpanded && e.target instanceof HTMLButtonElement) {
            return;
        }
        setIsExpanded((prev) => !prev);
    };
    if (isCommuteCalculatorOpen) {
        return null;
    }
    return (React.createElement(BottomSlider, { ref: activeScore ? forwardedRef : undefined, "data-testid": "score-details-slider", "data-is-expanded": isExpanded, className: styles.container, isOpen: typeof activeScoreData !== "undefined", isExpanded: isExpanded, fullAreaClickable: true, onExpandContract: handleOnExpandContractClick },
        React.createElement("div", { className: styles.score },
            React.createElement(Score, { scoreKey: activeScore, scoreValue: activeScoreData === null || activeScoreData === void 0 ? void 0 : activeScoreData.value, backgroundColor: (_a = activeCategoryData === null || activeCategoryData === void 0 ? void 0 : activeCategoryData.colors) === null || _a === void 0 ? void 0 : _a.background, fillColor: (_b = activeCategoryData === null || activeCategoryData === void 0 ? void 0 : activeCategoryData.colors) === null || _b === void 0 ? void 0 : _b.fill, className: styles.score }),
            React.createElement(ScoreComparison, { scoreKey: activeScore, locationScoreValue: activeScoreData === null || activeScoreData === void 0 ? void 0 : activeScoreData.value, comparedTo: (_c = activeScoreData === null || activeScoreData === void 0 ? void 0 : activeScoreData.geographies) === null || _c === void 0 ? void 0 : _c.g30, className: styles.scoreComparison })),
        React.createElement(ScorePoiList, { isLoading: isMarkersLoading, pois: markersData, scoreKey: activeScore, showPois: false }),
        React.createElement(ScoreText, { text: activeScoreData === null || activeScoreData === void 0 ? void 0 : activeScoreData.text })));
});
ScoreDetailsSlider.displayName = "ScoreDetailsSlider";
//# sourceMappingURL=index.js.map