"use client";

import { Select, Text } from "@mantine/core";

import { clientApi } from "@homarr/api/client";
import { useI18n } from "@homarr/translation/client";

import type { CommonWidgetInputProps } from "./common";
import { useWidgetInputTranslation } from "./common";
import { useFormContext } from "./form";

export const WidgetUmamiEventInput = ({ property, kind }: CommonWidgetInputProps<"umamiEventName">) => {
  const t = useI18n("widget.umami.option.eventName");
  const tEvents = useI18n("widget.umami.option.events");
  const tInput = useWidgetInputTranslation(kind, property);
  const form = useFormContext();

  const integrationIds = form.values.integrationIds;
  const websiteId = form.values.options.websiteId as string | undefined;

  const { data: eventNames, isPending } = clientApi.widget.umami.getEventNames.useQuery(
    { integrationId: integrationIds[0] ?? "", websiteId: websiteId ?? "" },
    { enabled: Boolean(integrationIds[0]) && Boolean(websiteId) },
  );

  if (!websiteId || integrationIds.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        {tEvents("configureWebsiteFirst")}
      </Text>
    );
  }

  const data = [{ value: "", label: t("none") }, ...(eventNames ?? [])];

  return (
    <Select
      label={tInput("label")}
      description={tInput("description")}
      placeholder={isPending ? tEvents("loading") : undefined}
      searchable
      nothingFoundMessage={tEvents("noEvents")}
      data={data}
      {...form.getInputProps(`options.${property}`)}
    />
  );
};