import { Directive, effect, inject, input } from '@angular/core'
import { FormApi } from '@tanstack/form-core'
import { TanStackWithFormInjectable } from './with-form-injectable'
import type {
  FormAsyncValidateOrFn,
  FormValidateOrFn,
} from '@tanstack/form-core'

@Directive({
  selector: '[tanstack-with-form]',
  standalone: true,
  providers: [TanStackWithFormInjectable],
})
export class TanStackWithForm<
  TFormData,
  TOnMount extends undefined | FormValidateOrFn<TFormData>,
  TOnChange extends undefined | FormValidateOrFn<TFormData>,
  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
  TSubmitMeta,
> {
  form =
    input.required<
      FormApi<
        TFormData,
        TOnMount,
        TOnChange,
        TOnChangeAsync,
        TOnBlur,
        TOnBlurAsync,
        TOnSubmit,
        TOnSubmitAsync,
        TOnDynamic,
        TOnDynamicAsync,
        TOnServer,
        TSubmitMeta
      >
    >()

  base = inject(TanStackWithFormInjectable)

  constructor() {
    effect(() => {
      this.base._form.set(this.form())
    })
  }
}