import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('digit-form') as HTMLFormElement;
    const inputs = document.querySelectorAll('.digit-input') as NodeListOf<HTMLInputElement>;
    const combinedInput = document.getElementById('password') as HTMLInputElement;

    if (!form || !combinedInput) {
        console.error('Form or combined input not found!');
        return;
    }

    // Логика для объединения значений и отправки формы
    form.addEventListener('submit', (event) => {
        event.preventDefault(); // остановить стандартное поведение формы

        let combinedValue = '';
        inputs.forEach(input => {
            combinedValue += input.value;
        });

        combinedInput.value = combinedValue;

        form.submit(); // отправить форму с обновленным значением
    });

    // Логика для переноса фокуса при вводе
    inputs.forEach((input, index) => {
        input.addEventListener('input', (event) => {
            const value = input.value;

            // Если пользователь вставляет больше одной цифры
            if (value.length > 1) {
                const values = value.split('');
                values.forEach((char: string, idx: number) => {
                    if (index + idx < inputs.length) {
                        inputs[index + idx].value = char;
                    }
                });
                if (index + values.length < inputs.length) {
                    inputs[index + values.length].focus();
                }
            } else if (value.length >= 1 && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }
        });

        input.addEventListener('keydown', (event) => {
            if (event.key === 'Backspace' && input.value === '' && index > 0) {
                inputs[index - 1].focus();
            }
        });
    });

    // Логика для обработки вставки текста
    inputs.forEach((input, index) => {
        input.addEventListener('paste', (event: ClipboardEvent) => {
            event.preventDefault();
            const paste = event.clipboardData?.getData('text') || '';
            const values = paste.split('');

            values.forEach((char: string, idx: number) => {
                if (index + idx < inputs.length) {
                    inputs[index + idx].value = char;
                }
            });

            if (index + values.length < inputs.length) {
                inputs[index + values.length].focus();
            }
        });
    });
});