import React, { useMemo } from "react";
import { useRootElement } from "../context";
import * as styles from "./styles";
import { useNeighborhoodMarketTrends } from "~/sdks/NeighborhoodMarketTrends/context";
import { GridGraph } from "~/components/Graphs/GridGraph/lazy";
export const HousingMarketConditions = () => {
    const { isLoading, marketActivity } = useNeighborhoodMarketTrends();
    const { sellerColor, neutralColor, buyerColor } = useRootElement();
    const intervals = useMemo(() => {
        var _a;
        if (isLoading || !marketActivity) {
            return [];
        }
        const filteredIntervals = Object.entries((_a = marketActivity.market_activity_by_property_type) === null || _a === void 0 ? void 0 : _a.all_residential_properties.intervals).filter(([key]) => key.match(/^\d{4}-\d{2}$/));
        return filteredIntervals;
    }, [marketActivity, isLoading]);
    const series = useMemo(() => {
        if (intervals.length < 1)
            return {
                numericValues: [],
                stringValues: [],
            };
        const rawNumericValues = intervals
            .map(([_, value]) => {
            var _a, _b, _c;
            return (_c = (_b = (_a = value.market_activity) === null || _a === void 0 ? void 0 : _a.stats_over_period) === null || _b === void 0 ? void 0 : _b.market_conditions_indicator_MOI_12month) !== null && _c !== void 0 ? _c : 0;
        })
            .reverse();
        return {
            // Per product, capping sellers market values to 100
            // This is for the presentation of the graph
            numericValues: rawNumericValues.map((value) => value > 100 ? 100 : value),
            stringValues: intervals
                .map(([_, value]) => {
                var _a, _b, _c;
                return (_c = (_b = (_a = value.market_activity) === null || _a === void 0 ? void 0 : _a.stats_over_period) === null || _b === void 0 ? void 0 : _b.market_conditions_assessment) !== null && _c !== void 0 ? _c : 0;
            })
                .reverse(),
        };
    }, [intervals]);
    const categories = useMemo(() => {
        if (!intervals)
            return [];
        return intervals.map(([key, _]) => key).reverse();
    }, [intervals]);
    if (!marketActivity) {
        return null;
    }
    return (React.createElement("div", { className: styles.container },
        React.createElement(GridGraph, { series: [
                {
                    name: "Housing Market Conditions",
                    data: series.numericValues,
                },
            ], categories: categories, type: "homes", chartType: "bar", showGrid: false, yaxis: {
                min: 0,
                labels: {
                    show: false,
                },
            }, height: "150%", colorAssignmentRule: ({ dataPointIndex }) => {
                const marketConditionsIndicatorStrings = series.stringValues;
                if (marketConditionsIndicatorStrings[dataPointIndex] ===
                    "sellers_market") {
                    return sellerColor;
                }
                if (marketConditionsIndicatorStrings[dataPointIndex] ===
                    "neutral_market") {
                    return neutralColor;
                }
                // buyers_market
                return buyerColor;
            } })));
};
//# sourceMappingURL=index.js.map