Frontend/src/app/components/server/lookup-server.tsx

"use client";

import { useToast } from "@/common/use-toast";
import { ServerPlatform, getServer } from "mcutils-library";
import { useRouter } from "next/navigation";
import { ReactElement } from "react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";

type LookupServerProps = {
  currentPlatform: string;
};

export function LookupServer({ currentPlatform }: LookupServerProps): ReactElement {
  const router = useRouter();
  const { toast } = useToast();

  /**
   * Lookup a server based on the platform
   *
   * @param platform the server platform
   * @param query the query to lookup
   */
  const lookupServer = async (platform: ServerPlatform, query: string) => {
    if (!query || query.length === 0) {
      return;
    }

    try {
      await getServer(platform, query);
    } catch (err) {
      toast({
        title: "Error",
        variant: "destructive",
        description: (err as Error).message,
        duration: 5000,
      });
      return;
    }

    router.push(`/server/${platform}/${query}`);
  };

  return (
    <form
      className="flex flex-col gap-2 justify-center items-center mt-4"
      action={(form: FormData) => {
        lookupServer(form.get("platform") as ServerPlatform, form.get("query") as string);
      }}
    >
      <div className="flex gap-2 justify-center">
        <div className="flex flex-col gap-2 items-start">
          <Label>Platform</Label>
          <Select name="platform">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder={currentPlatform} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value={ServerPlatform.Java}>Java</SelectItem>
              <SelectItem value={ServerPlatform.Bedrock}>Bedrock</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="flex flex-col gap-2 items-start">
          <Label htmlFor="query">Hostname</Label>
          <Input className="w-fit" type="search" name="query" placeholder="Query..." maxLength={128} />
        </div>
      </div>

      <Button type="submit">Search</Button>
    </form>
  );
}