import { useLabContext } from "@/components/labs/context";
import { useLabWebConsoles } from "@/components/labs/lab-web-consoles-context";
import { Button } from "@/components/ui/button";
import { useLocale, useLocaleFunction } from "@/hooks/use-localed";
import { client } from "@/lib/api-client";
import { cn } from "@/lib/utils";
import { sendGTMEvent } from "@next/third-parties/google";
import { Loader2Icon, TableProperties, TerminalIcon } from "lucide-react";

export function LabResourcesTrigger() {
  const locale = useLocale();
  const t = useLocaleFunction();
  const {
    lab,
    resources: resourcesList,
    onResourcesDialogOpenChanged,
  } = useLabContext();

  if (!resourcesList) {
    return (
      <Button disabled variant="outline" className="w-full cursor-pointer">
        <Loader2Icon className="animate-spin repeat-infinite" />
        {t("lab.resources")}
      </Button>
    );
  }

  const resources = resourcesList[0]?.resources;

  if (!resources) {
    return null;
  }

  return (
    <Button
      className="w-full cursor-pointer"
      variant="outline"
      onClick={() => {
        void client.refetchQueries({
          queryKey: [
            "lab.resources",
            lab.lab_code,
            locale,
            lab.region_name,
            lab.tidb_version,
          ],
        });
        onResourcesDialogOpenChanged(true);
        sendGTMEvent(
          {
            event: "lab.resources-button.click",
            lab_code: lab.lab_code,
          },
          "gtag"
        );
      }}
    >
      {t("lab.resources")}
    </Button>
  );
}

export function LabResourcesFocusedModeTrigger({
  className,
}: {
  className?: string;
}) {
  const locale = useLocale();
  const t = useLocaleFunction();
  const {
    lab,
    resources: resourcesList,
    onResourcesDialogOpenChanged,
  } = useLabContext();

  if (!resourcesList) {
    return (
      <Button
        disabled
        variant="ghost"
        size="icon"
        className={cn(
          "p-0 px-2 h-auto w-auto font-normal text-xs cursor-pointer",
          className
        )}
      >
        <Loader2Icon className="animate-spin repeat-infinite stroke-1 size-3" />
        {t("lab.resources")}
      </Button>
    );
  }

  const resources = resourcesList[0]?.resources;

  if (!resources) {
    return null;
  }

  return (
    <Button
      className={cn(
        "p-0 px-2 h-auto w-auto font-normal text-xs cursor-pointer",
        className
      )}
      variant="ghost"
      size="icon"
      onClick={() => {
        void client.refetchQueries({
          queryKey: [
            "lab.resources",
            lab.lab_code,
            locale,
            lab.region_name,
            lab.tidb_version,
          ],
        });
        onResourcesDialogOpenChanged(true);
        sendGTMEvent(
          {
            event: "lab.resources-tab.click",
            lab_code: lab.lab_code,
          },
          "gtag"
        );
      }}
    >
      <TableProperties className="stroke-1 size-3" />
      {t("lab.resources")}
    </Button>
  );
}

export function LabWebSsh() {
  const { lab, resources: resourcesList } = useLabContext();

  const resources = resourcesList?.[0]?.resources;
  const { supported, newConsole } = useLabWebConsoles();

  if (!supported || !resources) {
    return null;
  }

  const webSshResources = resources.filter(
    (resource) => resource.Type === "Web SSH"
  );

  if (webSshResources.length === 0) {
    return null;
  }

  return (
    <div className="space-y-2">
      {webSshResources.map((res) => (
        <Button
          key={res.Role}
          className="w-full cursor-pointer"
          variant="default"
          onClick={() => {
            newConsole({ url: res.Endpoint, label: res.Role });
            sendGTMEvent(
              {
                event: "lab.web-ssh-button.click",
                lab_code: lab.lab_code,
              },
              "gtag"
            );
          }}
        >
          <TerminalIcon />
          {webSshResources.length > 1 ? res.Role : res.Type}
        </Button>
      ))}
    </div>
  );
}