"use client";

import { startTransition, useActionState } from "react";
import { create{{tableObj.singularPascalCase}}, Create{{tableObj.singularPascalCase}}State } from "@/actions/{{authorizationLevel}}/{{tableObj.pluralKebabCase}}/create-{{tableObj.singularKebabCase}}";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { FormAlert } from "@/components/form-alert";
{{formControlsImports}}
{{#each referencesColumnList}}
import { {{this.singularPascalCase}} } from "@/schema/{{this.pluralKebabCase}}";
{{/each}}

export function {{tableObj.singularPascalCase}}CreateForm({{#if hasReferences}}{
  {{#each referencesColumnList}}
  {{this.singularCamelCase}}List,
  {{/each}}
}: {
  {{#each referencesColumnList}}
  {{this.singularCamelCase}}List: {{this.singularPascalCase}}[];
  {{/each}}
}{{/if}}) {
  const initialState: Create{{tableObj.singularPascalCase}}State = {};
  const [state, dispatch] = useActionState(create{{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>
  );
}