MemShellParty/web/src/components/memshell/tabs/classname-field.tsx

import { ChevronDown, ChevronUp, Settings } from "lucide-react";
import { Fragment, useState } from "react";
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
import {
  FormField,
  FormFieldItem,
  FormFieldLabel,
} from "@/components/ui/form.tsx";
import { Input } from "@/components/ui/input.tsx";
import type { MemShellFormSchema } from "@/types/schema.ts";

export function OptionalClassFormField({
  form,
}: Readonly<{ form: UseFormReturn<MemShellFormSchema> }>) {
  const { t } = useTranslation(["memshell", "common"]);
  const [showAdvanced, setShowAdvanced] = useState(false);
  return (
    <Fragment>
      <div className="pt-2">
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={() => setShowAdvanced(!showAdvanced)}
          className="flex items-center gap-2"
        >
          <Settings className="h-4 w-4" />
          {t("classNameOptions")}
          {showAdvanced ? (
            <ChevronUp className="h-4 w-4" />
          ) : (
            <ChevronDown className="h-4 w-4" />
          )}
        </Button>
      </div>
      {showAdvanced && (
        <FormProvider {...form}>
          <FormField
            control={form.control}
            name="shellClassName"
            render={({ field }) => (
              <FormFieldItem>
                <FormFieldLabel htmlFor="shellClassName">
                  {t("mainConfig.shellClassName")} {t("common:optional")}
                </FormFieldLabel>
                <Input
                  id="shellClassName"
                  {...field}
                  placeholder={t("common:placeholders.input")}
                />
              </FormFieldItem>
            )}
          />
          <FormField
            control={form.control}
            name="injectorClassName"
            render={({ field }) => (
              <FormFieldItem>
                <FormFieldLabel htmlFor="injectClassName">
                  {t("mainConfig.injectorClassName")} {t("common:optional")}
                </FormFieldLabel>
                <Input
                  id="injectClassName"
                  {...field}
                  placeholder={t("common:placeholders.input")}
                />
              </FormFieldItem>
            )}
          />
        </FormProvider>
      )}
    </Fragment>
  );
}