import React from "react";
import { useTranslation } from "react-i18next";
import { useRootElement } from "../context";
import * as styles from "./styles";
import { Select as UISelect, Text } from "~/components/deprecated";
import { AVAILABLE_TABS } from "~/sdks/LocalDemographics/constants";
export const Select = () => {
    const { t } = useTranslation("localDemographics");
    const { options, onChange } = useRootElement();
    let activeCategories = AVAILABLE_TABS;
    if (options.omitTabs) {
        activeCategories = AVAILABLE_TABS.filter((category) => { var _a; return !((_a = options.omitTabs) === null || _a === void 0 ? void 0 : _a.includes(category)); });
    }
    return (React.createElement("div", { className: styles.selectContainer },
        React.createElement(UISelect.Root, { value: options.activeTab, onValueChange: (value) => {
                onChange({ type: "tabs", data: value });
            } },
            React.createElement(UISelect.Trigger, { size: "large" },
                React.createElement(Text, { noMargin: true, variant: "h6", color: "--ll-color-placeholder" }, t(`data.${options.activeTab}.title`))),
            React.createElement(UISelect.Content, null, activeCategories.map((category) => (React.createElement(UISelect.Item, { value: category, key: category },
                React.createElement(Text, { noMargin: true, variant: "h6" }, t(`data.${category}.title`)))))))));
};
//# sourceMappingURL=index.js.map