import React, { useMemo } from "react";
import { useRootElement } from "../context";
import { GridGraph } from "~/components/Graphs/GridGraph/lazy";
import { useNeighborhoodMarketTrends } from "~/sdks/NeighborhoodMarketTrends/context";
export const MedianDaysOnMarket = ({ yAxisTitle, isIncrease, }) => {
    const { isLoading, marketActivity } = useNeighborhoodMarketTrends();
    const { increaseColor, decreaseColor } = 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 [];
        return intervals
            .map(([_, value]) => {
            var _a, _b, _c, _d;
            return (_d = (_c = (_b = (_a = value.market_activity) === null || _a === void 0 ? void 0 : _a.stats_over_period) === null || _b === void 0 ? void 0 : _b.market_speed) === null || _c === void 0 ? void 0 : _c.median_days_on_market) !== null && _d !== void 0 ? _d : null;
        })
            .reverse();
    }, [intervals]);
    const categories = useMemo(() => {
        if (!intervals)
            return [];
        return intervals.map(([key, _]) => key).reverse();
    }, [intervals]);
    const roundedMedianDays = useMemo(() => {
        const filteredSeries = series.filter((value) => value !== undefined);
        const maxDays = Math.max(...filteredSeries);
        const minDays = Math.min(...filteredSeries);
        return {
            max: Math.ceil((maxDays + 0.2 * (maxDays - minDays)) / 10) * 10,
            min: Math.max(0, Math.floor((minDays - 0.2 * (maxDays - minDays)) / 10) * 10),
        };
    }, [series]);
    if (!marketActivity) {
        return null;
    }
    return (React.createElement("div", null,
        React.createElement(GridGraph, { series: [
                {
                    name: "Median Days On Market",
                    data: series,
                },
            ], categories: categories, type: "homes", yaxis: {
                title: {
                    text: yAxisTitle,
                },
                max: roundedMedianDays.max,
                min: roundedMedianDays.min,
            }, markerColor: isIncrease ? increaseColor : decreaseColor })));
};
//# sourceMappingURL=index.js.map