"use client";

import { update{{joinCaseVariants.pluralPascalCase}} } from "@/actions/admin/{{leftCaseVariants.pluralKebabCase}}/update-{{joinCaseVariants.pluralKebabCase}}";
import { FormAlert } from "@/components/form-alert";
import { GenericCheckboxList } from "@/components/generic-checkbox-list";
import { Button } from "@/components/ui/button";
import { {{joinCaseVariants.singularPascalCase}} } from "@/schema/{{joinCaseVariants.pluralKebabCase}}";
import { {{rightCaseVariants.singularPascalCase}} } from "@/schema/{{rightCaseVariants.pluralKebabCase}}";
import { startTransition, useActionState } from "react";

export function {{joinCaseVariants.pluralPascalCase}}UpdateForm({
  id,
  {{rightCaseVariants.singularCamelCase}}List,
  {{joinCaseVariants.singularCamelCase}}List,
}: {
  id: string;
  {{rightCaseVariants.singularCamelCase}}List: {{rightCaseVariants.singularPascalCase}}[];
  {{joinCaseVariants.singularCamelCase}}List: {{joinCaseVariants.singularPascalCase}}[];
}) {
  const [state, dispatch] = useActionState(update{{joinCaseVariants.pluralPascalCase}}, {});

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.target as HTMLFormElement);
    startTransition(() => dispatch(formData));
  }

  return (
    <form
      action={dispatch}
      onSubmit={handleSubmit}
      className="flex flex-col gap-5"
    >
      <input type="hidden" name="id" defaultValue={id} />
      <GenericCheckboxList
        list={ {{rightCaseVariants.singularCamelCase}}List}
        name={"{{rightCaseVariants.singularCamelCase}}Ids"}
        defaultValue={ {{joinCaseVariants.singularCamelCase}}List.map(({{joinCaseVariants.singularCamelCase}}) => {{joinCaseVariants.singularCamelCase}}.{{rightCaseVariants.singularCamelCase}}Id!)}
        searchPlaceholder={"Search {{rightCaseVariants.pluralCapitalCase}}..."}
        keywordFields={["id"]}
        template={(item) => {
          return <div>{item.id}</div>;
        }}
      />
      <div>
        <Button type="submit">Submit</Button>
      </div>
      <FormAlert state={state} />
    </form>
  );
}