import './bootstrap';

import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
window.Alpine = Alpine;

Alpine.plugin(focus);

Alpine.start();

document.addEventListener("DOMContentLoaded", ()=> {

    //estados
    let inputs = document.querySelectorAll('.input-enter');
    let inputsProduct = document.querySelectorAll('.input-product');
    let btnAdd = document.querySelector('#btn-add');

    init();

    function init()
    {
        inputEnterInit();
        inputProductsEvent();
        addKeyListener();
    }



    function inputEnterInit() {
        inputs.forEach(function(input, index) {
            input.addEventListener('keydown', function(event) {
                if (event.key === 'Enter' || event.keyCode === 13) {
                    event.preventDefault();
                    let nextIndex = index + 1;
                    if (nextIndex < inputs.length) {
                        inputs[nextIndex].focus();
                    }
                }
            });
        });
    }

    function addKeyListener()
    {
        const keysPressed = ['F6','F7','F8','F9'];
        
        document.addEventListener('keydown',function(event){

            if(!keysPressed.includes(event.key)) return;

            event.preventDefault();

            if(event.key === 'F8' && document.querySelector('#modal-1').checked)
            {
                event.preventDefault();
                Livewire.emit('agregar');
            }
            else if(event.key === 'F9' && document.querySelector('#modal-1').checked)
            {
                Livewire.emit('save');                
            }
            else if(event.key === 'F6' && document.querySelector('#modal-2').checked)
            {
                event.preventDefault();
                Livewire.emit('agregar');
            }
            else if(event.key === 'F7')
            {
                Livewire.emit('cerrarVenta' && document.querySelector('#modal-2').checked);
            }
            else if(event.key === 'F8' && document.querySelector('#modal-2').checked)
            {
                Livewire.emit('entregarVenta');
            }
            else if(event.key === 'F9' && document.querySelector('#modal-2').checked)
            {
                Livewire.emit('saveArrivo');
            }
        })
    }


    function inputProductsEvent() {
        inputsProduct.forEach(function(inputProduct, index) {
            inputProduct.addEventListener('keydown', function(event) {
                if (event.key === 'Enter' || event.keyCode === 13) {
                    event.preventDefault();
                    let nextIndex = index + 1;
                    console.log(`nextIndex:${nextIndex} | Length: ${inputs.length}`);
                    if (nextIndex < inputsProduct.length) {
                        inputsProduct[nextIndex].focus();
                    }
                    if( (nextIndex == inputsProduct.length))
                    {
                        btnAdd.click();
                        updateProductsDOM();
                    }
                }
            });
        });
    }

    function updateListProducts()
    {
        inputsProduct[inputsProduct.length-6]?.focus();
    }

    Livewire.on('addProductEvent',function(){
        updateProductsDOM();
        updateListProducts();
    });

    async function updateProductsDOM()
    {
        inputsProduct = document.querySelectorAll('.input-product');
        inputProductsEvent();
    }
});