import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { HandCoinsIcon, ChartBarIcon, HouseLineIcon, } from "@phosphor-icons/react";
import * as Accordion from "../Accordion";
import * as Tabs from "../Tabs";
import * as Cards from "../Cards";
import * as styles from "./styles";
import { useNeighborhoodMarketTrends } from "~/sdks/NeighborhoodMarketTrends/context";
import { LoadingSpinner } from "~/components/deprecated";
import { useTracking } from "~/tracking";
import { TrackingPipelineEvents, AnalyticsEvents, TabIds, } from "~/sdks/NeighborhoodMarketTrends/types";
import { NoDataContentDeprecated } from "~/components/NoDataContent";
export const Content = ({ omitTabs }) => {
    var _a, _b, _c;
    const { t } = useTranslation("neighborhoodMarketTrends");
    const tracking = useTracking();
    const { isLoading, marketActivity, homesSoldPercentage } = useNeighborhoodMarketTrends();
    const intervals = (_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;
    const content = useMemo(() => {
        var _a, _b, _c, _d;
        const statsOverYear = (_a = intervals === null || intervals === void 0 ? void 0 : intervals["12m"]) === null || _a === void 0 ? void 0 : _a.market_activity.stats_over_period;
        const statsAtYearEnd = (_b = intervals === null || intervals === void 0 ? void 0 : intervals["12m"]) === null || _b === void 0 ? void 0 : _b.market_activity.stats_at_period_end;
        const statsOverMonth = (_c = intervals === null || intervals === void 0 ? void 0 : intervals["30d"]) === null || _c === void 0 ? void 0 : _c.market_activity.stats_over_period;
        const tabsConfig = [
            {
                id: TabIds.marketConditions,
                icon: HandCoinsIcon,
                label: t("tabs.marketConditions.title"),
                content: [
                    ...(typeof (statsOverMonth === null || statsOverMonth === void 0 ? void 0 : statsOverMonth.market_conditions_indicator_MOI_12month) !==
                        "undefined"
                        ? [
                            React.createElement(Cards.MarketType, { key: "market-type" }),
                            React.createElement(Cards.HousingMarketConditions, { key: "market-conditions" }),
                        ]
                        : []),
                ],
            },
            {
                id: TabIds.currentActivity,
                icon: HouseLineIcon,
                label: t("tabs.currentActivity.title"),
                content: [
                    ...(typeof (statsAtYearEnd === null || statsAtYearEnd === void 0 ? void 0 : statsAtYearEnd.home_asking_prices.median_price) !==
                        "undefined"
                        ? [React.createElement(Cards.MedianAskingPrice, { key: "median-asking-price" })]
                        : []),
                    ...(typeof (statsOverYear === null || statsOverYear === void 0 ? void 0 : statsOverYear.market_speed.median_days_on_market) !==
                        "undefined"
                        ? [React.createElement(Cards.MedianDaysOnMarket, { key: "median-days-on-market" })]
                        : []),
                    ...(typeof ((_d = statsOverYear === null || statsOverYear === void 0 ? void 0 : statsOverYear.home_selling_prices) === null || _d === void 0 ? void 0 : _d.median_ratio_of_sold_to_asking_price_percent) !== "undefined" &&
                        homesSoldPercentage >= 0.75
                        ? [
                            React.createElement(Cards.MedianSaleVsAskingPrice, { key: "median-sales-vs-asking-price" }),
                        ]
                        : []),
                ],
            },
            {
                id: TabIds.recentTrends,
                icon: ChartBarIcon,
                label: t("tabs.recentTrends.title"),
                content: [
                    ...(typeof (statsOverYear === null || statsOverYear === void 0 ? void 0 : statsOverYear.median_construction_year_sold_homes) !==
                        "undefined"
                        ? [React.createElement(Cards.MedianConstructionYear, { key: "median-construction-year" })]
                        : []),
                    ...(typeof (statsOverYear === null || statsOverYear === void 0 ? void 0 : statsOverYear.sold_homes_count) !== "undefined" &&
                        homesSoldPercentage >= 0.75
                        ? [React.createElement(Cards.MedianSalePrice, { key: "median-sale-price" })]
                        : []),
                    ...(typeof (statsOverYear === null || statsOverYear === void 0 ? void 0 : statsOverYear.home_selling_prices.median_price_per_square_foot) !== "undefined" &&
                        homesSoldPercentage >= 0.75
                        ? [React.createElement(Cards.MedianSalePriceSQFT, { key: "median-sale-price-sq-ft" })]
                        : []),
                    ...(typeof (statsOverYear === null || statsOverYear === void 0 ? void 0 : statsOverYear.sold_homes_count) !== "undefined"
                        ? [React.createElement(Cards.HomesSold, { key: "homes-sold" })]
                        : []),
                ],
            },
        ];
        return tabsConfig.filter((tab) => !(omitTabs === null || omitTabs === void 0 ? void 0 : omitTabs.includes(tab.id)) && tab.content.length > 0);
    }, [intervals]);
    const handleTabChange = (tabId) => {
        tracking.postEvent({
            eventType: TrackingPipelineEvents.TAB_CLICKED,
            eventAttributes: [
                {
                    label: "activeCategory",
                    data: tabId,
                },
            ],
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.CATEGORY_SELECTED,
            eventAttributes: {
                ll_selected_category: tabId,
            },
        });
    };
    if (isLoading) {
        return (React.createElement("div", { className: styles.loadingContent },
            React.createElement(LoadingSpinner, { image: true })));
    }
    if (!marketActivity ||
        !intervals ||
        (intervals && Object.keys(intervals).length === 0)) {
        return React.createElement(NoDataContentDeprecated, { text: t("noData") });
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: styles.desktopContainer },
            React.createElement(Tabs.Root, { defaultValue: (_b = content[0]) === null || _b === void 0 ? void 0 : _b.id, onChange: handleTabChange },
                React.createElement(Tabs.List, null, content.map((item) => (React.createElement(Tabs.Tab, { key: item.id, icon: item.icon, tabId: item.id, className: styles.tab }, item.label)))),
                React.createElement("div", { className: styles.content },
                    React.createElement(Cards.Root, null, content.map((item) => (React.createElement(Tabs.Content, { key: `tab-content-${item.id}`, tabId: item.id, className: styles.sectionContent }, item.content))))))),
        React.createElement("div", { className: styles.mobileContainer },
            React.createElement(Accordion.Root, { defaultValue: (_c = content[0]) === null || _c === void 0 ? void 0 : _c.id }, content.map((item) => (React.createElement(Accordion.Item, { key: item.id, value: item.id },
                React.createElement(Accordion.Trigger, { icon: item.icon }, item.label),
                React.createElement(Accordion.Content, { className: styles.sectionContent }, item.content))))))));
};
//# sourceMappingURL=index.js.map