import { getConsumerGroup } from "@/api/groups/actions";
import { GroupParams } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/groups/[groupId]/Group.params";
import { BreadcrumbLink } from "@/components/Navigation/BreadcrumbLink";
import RichText from "@/components/RichText";
import { NoDataErrorState } from "@/components/NoDataErrorState";

import {
  Breadcrumb,
  BreadcrumbItem,
  Tooltip,
} from "@/libs/patternfly/react-core";
import { HomeIcon } from "@/libs/patternfly/react-icons";
import { getTranslations } from "next-intl/server";

export async function GroupBreadcrumb({
  params: paramsPromise,
}: {
  params: Promise<GroupParams>;
}) {
  const { groupId, kafkaId } = await paramsPromise;
  const t = await getTranslations();
  const consumerGroup = (await getConsumerGroup(kafkaId, groupId));

  if (consumerGroup.errors) {
    return <NoDataErrorState errors={consumerGroup.errors} />;
  }

  const groupIdDisplay = consumerGroup.payload?.attributes.groupId!;

  return (
    <Breadcrumb>
      <BreadcrumbItem key="home" to="/" showDivider>
        <Tooltip content={t("breadcrumbs.view_all_kafka_clusters")}>
          <HomeIcon />
        </Tooltip>
      </BreadcrumbItem>
      <BreadcrumbItem
        key="overview"
        to={`/kafka/${kafkaId}/overview`}
        showDivider
      >
        {t("breadcrumbs.overview")}
      </BreadcrumbItem>
      <BreadcrumbLink
        key={"cg"}
        href={`/kafka/${kafkaId}/groups`}
        showDivider={true}
      >
        {t("breadcrumbs.consumer_groups")}
      </BreadcrumbLink>
      <BreadcrumbItem key={"cgm"} showDivider={true} isActive={true}>
        {groupIdDisplay === "" ? (
          <RichText>{(tags) => t.rich("common.empty_name", tags)}</RichText>
        ) : (
          groupIdDisplay
        )}
      </BreadcrumbItem>
    </Breadcrumb>
  );
}
