import React, { useMemo } from "react";
import { ArrowDownIcon } from "@phosphor-icons/react";
import { useTranslation } from "react-i18next";
import * as styles from "./styles";
import { useNeighborhoodMarketTrends } from "~/sdks/NeighborhoodMarketTrends/context";
import { defaultColors } from "~/sdks/NeighborhoodMarketTrends/defaultState";
import { InfoPopover } from "~/sdks/NeighborhoodMarketTrends/components/InfoPopover";
export const ChangeIndicator = ({ yearlyChange, disclaimer, fieldTitle, }) => {
    const { t } = useTranslation("neighborhoodMarketTrends");
    const { appearance } = useNeighborhoodMarketTrends();
    const isIncrease = yearlyChange && yearlyChange >= 0;
    const color = useMemo(() => {
        var _a, _b;
        if (isIncrease) {
            return ((_a = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _a === void 0 ? void 0 : _a.increaseColor) || defaultColors.increaseColor;
        }
        return ((_b = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _b === void 0 ? void 0 : _b.decreaseColor) || defaultColors.decreaseColor;
    }, [appearance, isIncrease]);
    return (React.createElement(React.Fragment, null, yearlyChange ? (React.createElement("div", { className: styles.changeContainer },
        React.createElement(ArrowDownIcon, { className: styles.indicatorIcon, style: { color }, weight: "bold", "data-is-increase": isIncrease }),
        React.createElement("div", { className: styles.disclaimer, style: { color } },
            React.createElement("p", { className: styles.changeText },
                (yearlyChange * 100).toFixed(2),
                "%",
                " ",
                t(`marketIndicator.${isIncrease ? "increase" : "decrease"}`)),
            disclaimer && React.createElement(InfoPopover, null, disclaimer)))) : (React.createElement("p", { className: styles.noDataText }, fieldTitle &&
        t("marketIndicator.noChangeDisclaimer", {
            fieldTitle: fieldTitle.toLocaleLowerCase(),
        })))));
};
//# sourceMappingURL=index.js.map