import { Form, Field } from 'react-cool-forms';

const required = {
  method: ({ fieldValue }) => Boolean(fieldValue),
  message: `It's required field`,
};

const handleSubmit = x => console.log('submit: ', x);
const getFirstName = form => form.firstName;
const setFirstName = (form, value) => (form.firstName = value);

<Form initialFormValue={{ firstName: '' }} onSubmit={handleSubmit}>
  {({ submit }) => {
    return (
      <>
        <Field
          name='firstName'
          getValue={getFirstName}
          setValue={setFirstName}
          validators={[required]}>
          {({ value, error, onChange }) => {
            return (
              <label>
                First name:
                <input value={value} onChange={e => onChange(e.target.value)} />
                {error && <div style={{ color: 'red' }}>{error}</div>}
              </label>
            );
          }}
        </Field>
        <button onClick={submit}>Submit</button>
      </>
    );
  }}
</Form>

import {
  Form,
  Field,
  Repeater,
  Debugger,
  useFormState,
  type Validator,
  type Formatter,
} from 'react-cool-forms';

import { Form } from 'react-cool-forms';

<Form initialFormValue={{}} onSubmit={handleSubmit}>
  {({ formValue, errors, inProcess, submit, reset }) => <div>Some children here...</div>}
</Form>

type FormProps<T> = {
  initialFormValue: T;
  connectedRef?: React.Ref<FormRef<T>>;
  interrupt?: boolean;
  validators?: Array<Validator<T, T>>;
  onValidate?: (options: OnValidateOptions<T>) => void;
  onChange?: (options: OnChangeOptions<T>) => void;
  onSubmit: (options: OnSubmitOptions<T>) => void;
  children: (options: FormChildrenOptions<T>) => React.ReactElement;
};

type FormRef<T> = {
  getFormValue: () => T;
  modify: (formValue: T) => void;
  validate: (formValue: T) => Promise<boolean>;
  submit: () => void;
  reset: () => void;
};

type FormChildrenOptions<T> = {
  formValue: T;
  errors: Record<string, string>;
  inProcess: boolean;
  validate: (formValue: T) => Promise<boolean>;
  submit: () => void;
  reset: () => void;
};

type OnValidateOptions<T> = {
  formValue: T;
  isValid: boolean;
  errors: Record<string, string> | null;
};

type OnChangeOptions<T> = {
  formValue: T;
};

type OnSubmitOptions<T> = {
  formValue: T;
};

import { Field } from 'react-cool-forms';

<Field
  name='name'
  getValue={(person: Person) => person.name}
  setValue={(person: Person, value: string) => (person.name = value)}>
  {({ value, error, onChange }) => <div>Some children here...</div>}
</Field>

type FieldProps<T, S> = {
  name: string;
  getValue: (formValue: S) => T;
  setValue: (formValue: S, fieldValue: T) => void;
  formatter?: Formatter<T>;
  validators?: Array<Validator<T, S>>;
  updatingKey?: string | number;
  enableOnChangeValidation?: boolean;
  onValidate?: (options: OnValidateFieldOptions<T>) => void;
  children: (options: FieldChildrenOptions<T>) => React.ReactElement;
};

type OnValidateFieldOptions<T, N extends HTMLElement> = {
  nodeRef: React.RefObject<N> | null;
  isValid: boolean;
  fieldValue: T;
};

type FieldChildrenOptions<T> = {
  name: string;
  value: T;
  error: string | null;
  nodeRef: React.RefObject<any>;
  validate: () => Promise<boolean>;
  notify: (value: T) => void;
  onChange: (value: T) => void;
};

import { type Validator, type ValidatorMethodOptions } from 'react-cool-forms';

type Validator<T, S> = {
  method: (options: ValidatorMethodOptions<T, S>) => boolean | Promise<boolean>;
  interrupt: boolean; // Whether to abort validation if it fails on this validator
  message: string;
};

type ValidatorMethodOptions<T, S> = {
  fieldValue: T;
  formValue: S;
};

// Example of sync validator
const required = {
  method: ({ formValue, fieldValue }) => Boolean(fieldValue),
  message: `It's required field`,
};

// Example of async validator
const checkLogin = {
  method: ({ formValue, fieldValue }) => {
    return new Promise(resolve => {
      // Emulates request to server
      setTimeout(() => {
        resolve(true);
      }, 200);
    })
  },
  message: 'This login already exists',
};

import { type Formatter, type FormatterOptions } from 'react-cool-forms';

<Field
  name='nickname'
  getValue={x => x.nickname}
  setValue={(x, v) => (x.nickname = v)}
  formatter={formatUppercase}>
  {({ value, nodeRef, onChange }) => (
    // Pass a nodeRef if you need a node reference in the format function to move the caret
    <TextField
      ref={nodeRef}
      label='Your nickname'
      value={value}
      onChange={onChange}
    />
  )}
</Field>

const formatUppercase = (options: FormatterOptions<string, HTMLInputElement>) => {
  const { prevValue, nextValue, node } = options;

 return nextValue.toUpperCase();
};

type Formatter<T, N extends HTMLElement> = (options: FormatterOptions<T, N>) => T;

type FormatterOptions<T, N> = {
  prevValue: T;
  nextValue: T;
  node: N | null;
};

import { Repeater } from 'react-cool-forms';

const getCompanies = (form: MyForm): Array<Company> => form.companies;
const setCompanies = (form: MyForm, value: Array<Company>) => (form.companies = value);
const getKey = (value: Company) => value.ID;
const renderTrigger = ({ append }) => {
  return <button onClick={() => append(createCompany())}>Add company</button>;
};

const getCompanyName = (company: Company) => company.name;
const setCompanyName = (company: Company, value: string) => (company.name = value);

<Form initialFormValue={initialFormValue} onSubmit={handleSubmit}>
  {({ submit }) => {
    return (
      <Repeater
        name='companies'
        getValue={getCompanies}
        setValue={setCompanies}
        getKey={getKey}
        renderTrigger={renderTrigger}>
        {({ idx, key, shouldFocus, remove }) => {
          return (
            <>
              <Field
                name={`companies(${key}).name`} // name can be any unique value
                getValue={getCompanyName}
                setValue={setCompanyName}
                updatingKey={idx} // for correct removing
                validators={[required]}>
                {({ value, error, onChange }) => <div>Some children here...</div>}
              </Field>
              <button onClick={() => remove(idx)}>remove company</button>
            </>
          );
        }}
      </Repeater>
    );
  }}
</Form>

type RepeaterProps<T, S> = {
  name: string;
  connectedRef?: React.Ref<RepeaterRef<T>>;
  getValue: (formValue: S) => Array<T>;
  setValue: (formValue: S, fieldValue: Array<T>) => void;
  getKey: (formValue: T) => string | number;
  interrupt?: boolean;
  triggerPosition?: 'before' | 'after';
  renderTrigger?: (options: RenderTriggerOptions<T>) => React.ReactElement;
  children: (options: RepeaterChildrenOptions<T>) => React.ReactElement;
};

type RenderTriggerOptions<T> = {
  inProcess: boolean;
  size: number;
  append: (item: T, shouldFocus?: boolean) => void;
  prepend: (item: T, shouldFocus?: boolean) => void;
  insert: (idx: number, item: T, shouldFocus?: boolean) => void;
  swap: (from: number, to: number) => void;
  remove: (idx: number | Array<number>) => void;
};

type RepeaterChildrenOptions<T> = {
  key: string | number;
  idx: number;
  isFirst: boolean;
  isLast: boolean;
  isEven: boolean;
  isOdd: boolean;
  isSingle: boolean;
  size: number;
  shouldFocus: boolean;
  formValue: T;
  errors: Record<string, string> | null;
  inProcess: boolean;
  remove: (idx: number | Array<number>) => void;
};

import { Debugger } from 'react-cool-forms';

<Form initialFormValue={{}} onSubmit={handleSubmit}>
  {({ formValue, errors, inProcess, submit, reset }) => 
    <>
      <div>Some children here...</div>
      <Debugger />
    </>
  }
</Form>

// Example of output
{
  "errors": {
    "name": "It is required field"
  },
  "formValue": {
    "name": "",
    "companies": [
      {
        "ID": 1,
        "name": "Company #1"
      },
      {
        "ID": 2,
        "name": "Company #2"
      }
    ]
  }
}

const {
  formValue,
  errors,
  inProcess,
  addValidator,
  removeValidator,
  modify,
  validate,
  submit,
  reset,
} = useFormState();

useFormState<MyForm, string>({
  detectChanges: x => x.phone,
});

type UseFormStateOptions<T, S> = {
  detectChanges: (formValue: T) => S;
};