import React from "react";
import { Select as UISelect, Text } from "@local-logic/core/ui";
import useTranslator from "~/hooks/useTranslator";
import { translations as demographicsGroupTranslations } from "~/localization/translation-packs/demographicsGroups";
import { demographicsCategories } from "~/constants/demographics-categories";
import { DemographicsCategories } from "~/types/demographics-categories";
import { useRootElement } from "../context";
import * as S from "./styles";

export const Select = () => {
  const { options, onChange } = useRootElement();
  const { translations } = useTranslator([demographicsGroupTranslations]);

  let activeCategories = demographicsCategories;

  if (options.omitTabs) {
    activeCategories = demographicsCategories.filter(
      (category) => !options.omitTabs?.includes(category.value)
    );
  }

  return (
    <S.SelectContainer>
      <UISelect.Root
        value={options.activeTab}
        onValueChange={(value: DemographicsCategories) => {
          onChange({ type: "tabs", data: value });
        }}
      >
        <UISelect.Trigger size="large">
          <Text noMargin variant="h6" color="--ll-color-placeholder">
            {translations[options.activeTab]}
          </Text>
        </UISelect.Trigger>
        <UISelect.Content>
          {activeCategories.map((category) => (
            <UISelect.Item value={category.value} key={category.value}>
              <Text noMargin variant="h6">
                {translations[category.value]}
              </Text>
            </UISelect.Item>
          ))}
        </UISelect.Content>
      </UISelect.Root>
    </S.SelectContainer>
  );
};