import React from "react";
import { useTranslation } from "react-i18next";
import * as commonCardStyles from "../styles";
import * as styles from "./styles";
import { useNeighborhoodMarketTrends } from "~/sdks/NeighborhoodMarketTrends/context";
import { defaultColors } from "~/sdks/NeighborhoodMarketTrends/defaultState";
import * as Graphs from "~/sdks/NeighborhoodMarketTrends/components/Graphs";
export const HousingMarketConditions = () => {
    var _a, _b, _c;
    const { t } = useTranslation("neighborhoodMarketTrends");
    const { appearance } = useNeighborhoodMarketTrends();
    return (React.createElement("div", { className: commonCardStyles.graphOnlyContainer },
        React.createElement("h3", { className: commonCardStyles.title }, t("graphs.housingMarketConditions.title")),
        React.createElement("h4", { className: commonCardStyles.subtitle }, t("graphs.housingMarketConditions.subtitle")),
        React.createElement("div", { className: styles.subContainer },
            React.createElement("div", { className: styles.yAxis },
                React.createElement("p", { className: commonCardStyles.subtitle }, t("graphs.housingMarketConditions.marketTypes.buyer")),
                React.createElement("p", { className: commonCardStyles.subtitle }, t("graphs.housingMarketConditions.marketTypes.neutral")),
                React.createElement("p", { className: commonCardStyles.subtitle }, t("graphs.housingMarketConditions.marketTypes.seller"))),
            React.createElement("div", { className: styles.barChart },
                React.createElement(Graphs.Root, { colors: appearance === null || appearance === void 0 ? void 0 : appearance.colors },
                    React.createElement(Graphs.HousingMarketConditions, null)))),
        React.createElement("div", { className: styles.legend },
            React.createElement("div", { className: styles.legendItem },
                React.createElement("div", { className: styles.legendColor, style: {
                        backgroundColor: ((_a = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _a === void 0 ? void 0 : _a.sellerColor) || defaultColors.sellerColor,
                    } }),
                React.createElement("p", { className: commonCardStyles.subtitle }, t("graphs.housingMarketConditions.marketTypes.seller"))),
            React.createElement("div", { className: styles.legendItem },
                React.createElement("div", { className: styles.legendColor, style: {
                        backgroundColor: ((_b = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _b === void 0 ? void 0 : _b.neutralColor) || defaultColors.neutralColor,
                    } }),
                React.createElement("p", { className: commonCardStyles.subtitle }, t("graphs.housingMarketConditions.marketTypes.neutral"))),
            React.createElement("div", { className: styles.legendItem },
                React.createElement("div", { className: styles.legendColor, style: {
                        backgroundColor: ((_c = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _c === void 0 ? void 0 : _c.buyerColor) || defaultColors.buyerColor,
                    } }),
                React.createElement("p", { className: commonCardStyles.subtitle }, t("graphs.housingMarketConditions.marketTypes.buyer"))))));
};
//# sourceMappingURL=index.js.map