import React from "react";
import "~/assets/styles/old-tailwind.css";
import { useTranslation } from "react-i18next";
import * as DemographicsTabs from "./components/Content/DemographicsTabs";
import { Content } from "./components/Content";
import { Footer } from "./components/Footer";
import { LocalDemographicsProvider } from "./context";
import * as styles from "./styles";
import { TrackingProvider, initializeAnalytics } from "~/tracking";
import ResizeWrapper from "~/components/ResizeWrapper";
import { LocalLogicProvider } from "~/context/LocalLogicProvider";
import { useStateManagerContext } from "~/context/stateManager";
import useIsMobile from "~/hooks/useIsMobile";
import { ProductNames } from "~/types";
import { ANALYTICS_SETTINGS } from "~/constants/analytics";
import { TitleHeader } from "~/components/TitleHeader";
initializeAnalytics(ANALYTICS_SETTINGS.localDemographics.key);
const LocalDemographics = () => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
    const { t } = useTranslation("localDemographics");
    const { sdkState } = useStateManagerContext();
    const isMobile = useIsMobile();
    return (React.createElement(ResizeWrapper, null,
        React.createElement(LocalLogicProvider, { environment: (_b = (_a = sdkState.globalOptions) === null || _a === void 0 ? void 0 : _a.environment) === null || _b === void 0 ? void 0 : _b.api, apiKey: sdkState.apiKey, appearance: (_c = sdkState.globalOptions) === null || _c === void 0 ? void 0 : _c.appearance, locale: (_d = sdkState.globalOptions) === null || _d === void 0 ? void 0 : _d.locale, product: ProductNames.LOCAL_DEMOGRAPHICS },
            React.createElement(TrackingProvider, { trackingPipelineSettings: {
                    apiKey: sdkState.apiKey || "",
                }, analyticsSettings: ANALYTICS_SETTINGS.localDemographics, meta: {
                    clientId: sdkState.clientId,
                    productName: ProductNames.LOCAL_DEMOGRAPHICS,
                    productVersion: FULL_APP_VERSION,
                }, attributes: {
                    location: {
                        lat: (_e = sdkState.options) === null || _e === void 0 ? void 0 : _e.lat,
                        lng: (_f = sdkState.options) === null || _f === void 0 ? void 0 : _f.lng,
                    },
                    host: sdkState.location,
                    host_url: document.referrer,
                    locale: (_g = sdkState.globalOptions) === null || _g === void 0 ? void 0 : _g.locale,
                    isMobile,
                }, flags: {
                    isDebugMode: import.meta.env.VITE_TRACKING_PIPELINE_DEBUG === "true",
                } },
                React.createElement(LocalDemographicsProvider, null,
                    React.createElement("div", { className: styles.container },
                        React.createElement("div", { className: styles.tabsRoot },
                            React.createElement(TitleHeader, { title: typeof ((_h = sdkState.options) === null || _h === void 0 ? void 0 : _h.title) === "string" ||
                                    ((_j = sdkState.options) === null || _j === void 0 ? void 0 : _j.title) === false
                                    ? sdkState.options.title
                                    : t("title") }),
                            !isMobile ? (React.createElement(DemographicsTabs.Tabs, null)) : (React.createElement(DemographicsTabs.Select, null)),
                            React.createElement(Content, null),
                            React.createElement(Footer, null))))))));
};
export default LocalDemographics;
//# sourceMappingURL=index.js.map