// AUTO-GENERATED by scripts/generate-wrappers.mjs — do not edit by hand.
// Source: packages/core/manifest.json (component "form").
import type { ElementType, ReactNode } from 'react';
import { Form as FormController, type FormOptions } from '@42/core/form';
import { C42 } from '../C42';

const DEFAULT_HTML: string | null = "<div data-c42-field>\n    <label for=\"email\">Email</label>\n    <input id=\"email\" name=\"email\" type=\"email\" data-c42-validate=\"required email\" />\n    <span data-c42-field-error hidden></span>\n  </div>\n  <div data-c42-field>\n    <label for=\"pwd\">Password</label>\n    <input id=\"pwd\" name=\"pwd\" type=\"password\" data-c42-validate=\"required\" data-c42-minlength=\"8\" />\n    <span data-c42-field-error hidden></span>\n  </div>\n  <button type=\"submit\">Sign up</button>";

export interface FormProps extends Partial<FormOptions> {
  /** Element/tag rendered as the controller root. Defaults to `"form"`. */
  as?: ElementType;
  className?: string;
  children?: ReactNode;
  /** Fired on `form:submit` — detail: `{ values }` */
  onSubmit?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `form:invalid` — detail: `{ errors }` */
  onInvalid?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `form:change` — detail: `{ name, value, values }` */
  onChange?: (detail: unknown, event: CustomEvent) => void;
  /** Fired on `form:reset` — detail: `(no detail)` */
  onReset?: (detail: unknown, event: CustomEvent) => void;
  /** Extra props are forwarded to the rendered `<form>` element. */
  [key: string]: unknown;
}

export function Form(props: FormProps) {
  const { as, className, children, onSubmit, onInvalid, onChange, onReset, mode, validators, messages, ...rest } = props;
  const options = { mode, validators, messages } as FormOptions;

  return (
    <C42
      controller={FormController}
      options={options}
      deps={[mode, validators, messages]}
      events={{
        'form:submit': onSubmit,
        'form:invalid': onInvalid,
        'form:change': onChange,
        'form:reset': onReset,
      }}
      as={(as as ElementType) ?? 'form'}
      className={className as string | undefined}
      html={DEFAULT_HTML ?? undefined}
      {...{ 'data-c42-form': '' }}
      {...rest}
    >
      {children as ReactNode}
    </C42>
  );
}