"use client";

{{#if hasFileDataType}}
import Link from "next/link";
{{/if}}
import { startTransition, useActionState } from "react";
import { update{{tableObj.singularPascalCase}}, Update{{tableObj.singularPascalCase}}State } from "@/actions/{{authorizationLevel}}/{{tableObj.pluralKebabCase}}/update-{{tableObj.singularKebabCase}}";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { FormAlert } from "@/components/form-alert";
{{formControlsImports}}
{{#if hasFileDataType}}
import { config } from "@/lib/config";
{{/if}}
import { {{tableObj.singularPascalCase}} } from "@/schema/{{tableObj.pluralKebabCase}}";
{{#each referencesColumnList}}
import { {{this.singularPascalCase}} } from "@/schema/{{this.pluralKebabCase}}";
{{/each}}

export function {{tableObj.singularPascalCase}}UpdateForm({ 
  {{tableObj.singularCamelCase}},
  {{#each referencesColumnList}}
  {{this.singularCamelCase}}List,
  {{/each}}
}: { 
  {{tableObj.singularCamelCase}}: {{tableObj.singularPascalCase}};
  {{#each referencesColumnList}}
  {{this.singularCamelCase}}List: {{this.singularPascalCase}}[];
  {{/each}}
}) {
  const initialState: Update{{tableObj.singularPascalCase}}State = {};
  const [state, dispatch] = useActionState(update{{tableObj.singularPascalCase}}, initialState);

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

  return (
    <div>
      <form action={dispatch} onSubmit={handleSubmit} className="flex flex-col gap-2">
{{formControls}}
        <div>
          <Button type="submit">Submit</Button>
        </div>
        <FormAlert state={state} />
      </form>
    </div>
  );
}