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

function initDownloadLogin(): void {
    const form = document.getElementById('digit-form') as HTMLFormElement | null;
    const combinedInput = document.getElementById('password') as HTMLInputElement | null;
    const inputs = document.querySelectorAll('.digit-input');

    if (!form || !combinedInput || inputs.length !== 6) {
        return;
    }

    const formEl = form;
    const passwordInput = combinedInput;
    const inputList = Array.from(inputs) as HTMLInputElement[];

    function tryAutoSubmit(): void {
        const allFilled = inputList.every((inp) => inp && inp.value.length >= 1);
        if (allFilled) {
            const combinedValue = inputList.map((inp) => inp.value).join('');
            passwordInput.value = combinedValue;
            formEl.submit();
        }
    }

    const preventAndCombine = (event: Event): void => {
        event.preventDefault();
        const combinedValue = inputList.map((inp) => inp.value).join('');
        passwordInput.value = combinedValue;
        formEl.submit();
    };

    formEl.addEventListener('submit', preventAndCombine);

    inputList.forEach((input, index) => {
        if (!input) return;
        input.addEventListener('input', () => {
            const value = input.value;
            if (value.length > 1) {
                const values = value.split('');
                values.forEach((char: string, idx: number) => {
                    if (index + idx < inputList.length && inputList[index + idx]) {
                        inputList[index + idx].value = char;
                    }
                });
                if (index + values.length < inputList.length && inputList[index + values.length]) {
                    inputList[index + values.length].focus();
                }
                tryAutoSubmit();
            } else if (value.length >= 1 && index < inputList.length - 1 && inputList[index + 1]) {
                inputList[index + 1].focus();
                tryAutoSubmit();
            } else if (value.length >= 1 && index === inputList.length - 1) {
                tryAutoSubmit();
            }
        });

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

    inputList.forEach((input, index) => {
        if (!input) return;
        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 < inputList.length && inputList[index + idx]) {
                    inputList[index + idx].value = char;
                }
            });
            if (index + values.length < inputList.length && inputList[index + values.length]) {
                inputList[index + values.length].focus();
            }
            tryAutoSubmit();
        });
    });
}

function runWhenReady(): void {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initDownloadLogin);
    } else {
        initDownloadLogin();
    }
}

runWhenReady();