import React, { useMemo } from "react";
import { useRootElement } from "../context";
import { GridGraph } from "~/components/Graphs/GridGraph/lazy";
import { useNeighborhoodMarketTrends } from "~/sdks/NeighborhoodMarketTrends/context";
export const MedianSaleVsAskingPrice = ({ 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 [];
        const rawValues = 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.home_selling_prices) === null || _c === void 0 ? void 0 : _c.median_ratio_of_sold_to_asking_price_percent) !== null && _d !== void 0 ? _d : 0;
        })
            .reverse();
        return rawValues.map((value) => (value > 0 ? value - 100 : 0));
    }, [intervals]);
    const categories = useMemo(() => {
        if (!intervals)
            return [];
        return intervals.map(([key, _]) => key).reverse();
    }, [intervals]);
    if (!marketActivity) {
        return null;
    }
    return (React.createElement("div", null,
        React.createElement(GridGraph, { series: [
                {
                    name: "Median Sale vs Asking Price",
                    data: series,
                },
            ], categories: categories, type: "percentage", chartType: "bar", showGrid: true, showYAxisAnnotation: true, markerColor: isIncrease ? increaseColor : decreaseColor })));
};
//# sourceMappingURL=index.js.map