import type { InputHTMLAttributes } from 'react';

/**
 * Isian teks yang selalu berhuruf kapital.
 *
 * Daftar kolomnya adalah `Pendaftar::KOLOM_KAPITAL`; server tetap
 * mengubahnya saat menyimpan (lihat `Pendaftar::booted`), jadi komponen ini
 * hanya membuat pendaftar melihat hasil akhirnya sejak mengetik. Isian tetap
 * tak terkendali (uncontrolled) supaya pemulihan dari sessionStorage dan
 * pembacaan lewat FormData tidak berubah.
 */
export function InputKapital(props: InputHTMLAttributes<HTMLInputElement>) {
    return (
        <input
            {...props}
            type="text"
            autoCapitalize="characters"
            data-kapital
            onInput={(acara) => {
                const el = acara.currentTarget;
                const kapital = el.value.toUpperCase();

                if (el.value !== kapital) {
                    /*
                     * Menulis ulang `value` memindahkan kursor ke ujung, jadi
                     * posisinya disimpan lalu dipasang kembali. Panjang teks
                     * tidak berubah sehingga posisinya tetap sah.
                     */
                    const awal = el.selectionStart;
                    const akhir = el.selectionEnd;
                    el.value = kapital;

                    if (awal !== null && akhir !== null) {
                        el.setSelectionRange(awal, akhir);
                    }
                }

                props.onInput?.(acara);
            }}
        />
    );
}