import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import * as commonStyles from "../styles";
import * as styles from "./styles";
import { useNeighborhoodMarketTrends } from "~/sdks/NeighborhoodMarketTrends/context";
import * as Graphs from "~/sdks/NeighborhoodMarketTrends/components/Graphs";
export const MarketType = () => {
    var _a, _b, _c;
    const { t } = useTranslation("neighborhoodMarketTrends");
    const { marketActivity, appearance } = useNeighborhoodMarketTrends();
    const buyerSellerPercentage = useMemo(() => {
        var _a, _b, _c;
        const indicator = (_c = (_b = (_a = marketActivity === null || marketActivity === void 0 ? void 0 : 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.stats_over_period) === null || _c === void 0 ? void 0 : _c.market_conditions_indicator_MOI_12month;
        if (typeof indicator !== "number") {
            return null;
        }
        if (indicator >= 9) {
            return 100;
        }
        return (indicator / 9) * 100;
    }, [
        (_c = (_b = (_a = marketActivity === null || marketActivity === void 0 ? void 0 : 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.stats_over_period) === null || _c === void 0 ? void 0 : _c.market_conditions_indicator_MOI_12month,
    ]);
    if (!buyerSellerPercentage) {
        return null;
    }
    return (React.createElement("div", { className: commonStyles.graphOnlyContainer },
        React.createElement("h3", { className: commonStyles.title }, t("graphs.marketType.title")),
        React.createElement("h4", { className: commonStyles.subtitle }, t("graphs.marketType.disclaimer")),
        React.createElement("div", { className: styles.content },
            React.createElement(Graphs.Root, { colors: appearance === null || appearance === void 0 ? void 0 : appearance.colors, className: styles.graph },
                React.createElement(Graphs.BuyerSellerMarket, { buyerSellerPercentage: buyerSellerPercentage, labels: {
                        buyer: t("graphs.marketType.marketTypes.buyer"),
                        seller: t("graphs.marketType.marketTypes.seller"),
                        neutral: t("graphs.marketType.marketTypes.neutral"),
                    } })))));
};
//# sourceMappingURL=index.js.map