import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import * as styles from "../styles";
import { ChangeIndicator } from "~/sdks/NeighborhoodMarketTrends/components/ChangeIndicator";
import { InfoPopover } from "~/sdks/NeighborhoodMarketTrends/components/InfoPopover";
import { useNeighborhoodMarketTrends } from "~/sdks/NeighborhoodMarketTrends/context";
import * as Graphs from "~/sdks/NeighborhoodMarketTrends/components/Graphs";
export const MedianSaleVsAskingPrice = () => {
    const { t } = useTranslation("neighborhoodMarketTrends");
    const { marketActivity, appearance } = useNeighborhoodMarketTrends();
    const medianSaleVsAskingPrice = useMemo(() => {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
        if (!marketActivity) {
            return null;
        }
        const current = (_e = (_d = (_c = (_b = (_a = marketActivity.market_activity_by_property_type) === null || _a === void 0 ? void 0 : _a.all_residential_properties.intervals["30d"]) === null || _b === void 0 ? void 0 : _b.market_activity) === null || _c === void 0 ? void 0 : _c.stats_over_period) === null || _d === void 0 ? void 0 : _d.home_selling_prices) === null || _e === void 0 ? void 0 : _e.median_ratio_of_sold_to_asking_price_percent;
        const getPercentChangeText = () => {
            if (!current)
                return null;
            const percentDiff = Math.abs(Math.round((current - 100) * 10) / 10);
            if (percentDiff === 0) {
                return t("valueComparison.equal");
            }
            return `${percentDiff}% ${current > 100 ? t("valueComparison.higher") : t("valueComparison.lower")}`;
        };
        return {
            current,
            currentInPercentChange: getPercentChangeText(),
            previous: (_l = (_k = (_j = (_h = (_g = (_f = marketActivity.market_activity_by_property_type) === null || _f === void 0 ? void 0 : _f.all_residential_properties) === null || _g === void 0 ? void 0 : _g.intervals["31-60d"]) === null || _h === void 0 ? void 0 : _h.market_activity) === null || _j === void 0 ? void 0 : _j.stats_over_period) === null || _k === void 0 ? void 0 : _k.home_selling_prices) === null || _l === void 0 ? void 0 : _l.median_ratio_of_sold_to_asking_price_percent,
        };
    }, [marketActivity, t]);
    const monthlyChange = useMemo(() => {
        if (!medianSaleVsAskingPrice ||
            !medianSaleVsAskingPrice.current ||
            !medianSaleVsAskingPrice.previous) {
            return null;
        }
        return ((medianSaleVsAskingPrice.current - medianSaleVsAskingPrice.previous) /
            medianSaleVsAskingPrice.previous);
    }, [medianSaleVsAskingPrice]);
    if (!medianSaleVsAskingPrice) {
        return null;
    }
    return (React.createElement("div", { className: styles.container },
        React.createElement("div", { className: styles.summary },
            React.createElement("div", null,
                React.createElement("div", { className: styles.header },
                    React.createElement("h3", { className: styles.title },
                        t("graphs.medianSaleVsAskingPrice.title"),
                        React.createElement(InfoPopover, { change: monthlyChange }, t("graphs.medianSaleVsAskingPrice.disclaimer"))),
                    React.createElement("h4", { className: styles.amount }, medianSaleVsAskingPrice.currentInPercentChange))),
            React.createElement(ChangeIndicator, { yearlyChange: monthlyChange, fieldTitle: t("graphs.medianSaleVsAskingPrice.title"), disclaimer: t("graphs.medianSaleVsAskingPrice.changeDisclaimer") })),
        React.createElement(Graphs.Root, { colors: appearance === null || appearance === void 0 ? void 0 : appearance.colors },
            React.createElement(Graphs.MedianSaleVsAskingPrice, { isIncrease: !monthlyChange || monthlyChange >= 0 }))));
};
//# sourceMappingURL=index.js.map