import { useState } from 'react'

function ControlledForm() {
    const [email, setEmail] = useState('')

    // Кожне натискання клавіші:
    // 1. Викликає setEmail
    // 2. Оновлює state
    // 3. Ре-рендерить компонент
    // 4. React порівнює Virtual DOM
    // 5. Оновлює реальний DOM (якщо потрібно)

    return (
        <input
            value={email} // Джерело істини: React state
            onChange={(e) => setEmail(e.target.value)}
        />
    )
}

import { useRef } from 'react'

function UncontrolledForm() {
    const emailRef = useRef(null)

    const handleSubmit = (e) => {
        e.preventDefault()
        // Читаємо значення тільки при submit
        console.log(emailRef.current.value) // Прямий доступ до DOM
    }

    // НЕ ПОТРІБЕН useState!
    // НЕ ПОТРІБЕН onChange!
    // Жодних ре-рендерів при введенні!

    return (
        <form onSubmit={handleSubmit}>
            <input ref={emailRef} defaultValue="" />
            <button type="submit">Відправити</button>
        </form>
    )
}

// Спрощена внутрішня структура
const fieldsRef = new Map([
    ['email', { ref: inputElement, options: { required: true } }],
    ['password', { ref: inputElement, options: { minLength: 8 } }],
])

// Спрощена імплементація
const formState = new Proxy(
    {},
    {
        get(target, prop) {
            // Підписуємося тільки на використані властивості!
            subscribe(prop)
            return calculateFormState(prop)
        },
    },
)

// Використання
function MyForm() {
    const { formState } = useForm()

    // Тільки 'isDirty' викликає підписку!
    console.log(formState.isDirty)

    // 'isValid' НЕ обчислюється, якщо не використовується
    // formState.isValid
}

// onChange будь-якого інпуту веде до:
function handleChange(event) {
    const fieldName = event.target.name
    const fieldConfig = fieldsRef.get(fieldName)

    if (shouldValidate(fieldConfig)) {
        validateField(fieldName, event.target.value)
    }

    // Оновлюємо тільки підписників на це поле
    notifySubscribers(fieldName)
}

npm install react-hook-form

import { useForm } from 'react-hook-form'

function SimpleForm() {
    // 1. Ініціалізуємо форму
    const {
        register, // Функція для реєстрації полів
        handleSubmit, // Wrapper для submit handler
        formState: { errors }, // Об'єкт з помилками валідації
    } = useForm()

    // 2. Callback, що викликається при успішному submit
    const onSubmit = (data) => {
        console.log(data) // { email: '...', password: '...' }
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            {/* 3. Реєструємо поле 'email' з правилами */}
            <input
                {...register('email', {
                    required: "Email обов'язковий",
                    pattern: {
                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                        message: 'Невалідний email',
                    },
                })}
            />
            {/* 4. Показуємо помилку, якщо є */}
            {errors.email && <span>{errors.email.message}</span>}

            <input
                type="password"
                {...register('password', {
                    required: "Пароль обов'язковий",
                    minLength: { value: 8, message: 'Мінімум 8 символів' },
                })}
            />
            {errors.password && <span>{errors.password.message}</span>}

            <button type="submit">Увійти</button>
        </form>
    )
}