Approve.enhancementPage = 1;
Approve.enhancementPagesRequested = [];

Approve.enhancementLoad = async (page, perPage) => {

    if(!perPage) perPage = 100;
    if(!page)    page = Approve.enhancementPage;

    // Carrega os itens no backend, mas no front, vamos popular visualmente
    // A mesma quantidade de itens, para criar um efeito de carregamento suave

    if(Approve.enhancementPagesRequested.indexOf(page) != -1) return;

    Approve.enhancementPagesRequested.push(page);

    let orderBy = Approve.getOrderBy();

    let search = Approve.lastEnhancementSearch || '';

    let res = await Api.get('/api/approve/enhancement', {
        page: page,
        limit: perPage,
        search: search,
        orderBy: orderBy['/aprovacao/enriquecimento']
    });

    res.pathname = location.pathname;

    // @todo Verificar se vale a pena armazenar todos os resultados
    Approve.pagination = res;

    Approve.enhancementPage++;

    let results = res.results;

    for(let i = 0; i < results.length; i++){

        if(page == 1 && i == 0){

            Approve.unselect();

            $('.table').empty();
            Approve.enhancementHeader();

        }

        let lineElm = Approve.enhancementLine(results[i]);

        $('.table').append(lineElm);


        if(i == results.length-1 && perPage == results.length){

            $(lineElm).on('visible', () => {

                $(lineElm).off('visible');

                Approve.enhancementLoad();

            });

        }

    }

    $('.no-results').remove();

    if(page == 1 && !results.length){

        if($('.search').val()){
            
            $('.table').empty();
            Approve.enhancementHeader();
            $('.search').focus();

            $('.table .line:not(:first-child)').empty();

            $('.table').after(`
                <div class="no-results">
                    <br><br>
                    <div class="round-card not-found center">
                        <p>Nenhum cadastro com o nome "${$('.search').val()}" encontrado. Que tal tentar outra busca?</p>
                    </div>
                </div>
            `);

        } else{

            $('.search').focus();

            $('.table, .pagination').hide();

            $('.table').after(`
                <div class="no-results">
                    <br><br>
                    <div class="round-card not-found center">
                        <p>Nenhum enriquecimento pendente de aprovação no momento</p>
                        <button onclick="Nav.to('/enriquecimento/catalogo')">Enriquecer produtos</button>
                    </div>
                </div>
            `);

        }
        
        return;

    }

    $(window).trigger('scroll');

};

Approve.enhancementHeader = () => {

    $('.table').empty();

    let lineElm = $('<div class="line"></div>');

    lineElm.append('<div class="title"><input class="ui-avoid select-all" type="checkbox"></div>');
    lineElm.append('<div class="title">Imagem <div class="suggest-images"></div></div>');
    lineElm.append('<div class="title">Id</div>');
    lineElm.append('<div class="title">Referência</div>');
    lineElm.append('<div class="title">Nome do produto <div class="suggest-name"></div></div>');
    lineElm.append('<div class="title">Marca</div>');
    lineElm.append('<div class="title">Categoria <div class="suggest-category"></div></div>');
    lineElm.append('<div class="title">Ean <div class="suggest-ean"></div></div>');

    lineElm.append('<div class="title"><label><input type="text" class="search" placeholder="Pesquisar"></label></div>');

    $('.table').append(lineElm);

    $('.search').val(Approve.lastEnhancementSearch);

    $('.search').on('keyup', () => {

        Approve.enhancementSearch();

    });

    // lineElm.find('.search').focus();

    // let order = Approve.getOrderBy();

    // if(order){

    //     let orderBy = order['/aprovacao/enriquecimento'];

    //     if(orderBy){
    
    //         Object.keys(orderBy).forEach((key) => {
    
    //             let orderType = orderBy[key];
    
    //             lineElm.find('[order-by="' + key + '"][order-type="' + orderType + '"]').addClass('active-order-by');
                
    //         });
    
    //     }
    
    // }

};

Approve.enhancementLine = (line) => {

    let category = '(A definir)';

    if(line.category && line.category.name){
        category = line.category.name;
    }

    let lineElm = $('<div class="line"></div>');

    lineElm.append('<label class="title"><input type="checkbox"></label>');

    // -------------- Images --------------

    let images = Approve.allImages(line);

    lineElm.append('<div class="title image"></div>');

    // All images must have remove button, and zoom. The first image must be the main image

    if(images.length){

        let mainImage = images[0];

        lineElm.find('.image').append($('<div class="img-suggested"><img><div class="remove-img">✕</div></div>'));
        lineElm.find('.image img').attr('load-src', mainImage.src);

        lineElm.find('.image img').css({
            opacity: 0
        });

    } else{

        lineElm.find('.image').append($('<div class="no-image round-card dashed ignore-selection"></div>').text(I18n.get('Sem imagem')));

    }

    lineElm.find('.image').append('<input type="file" multiple class="to-drag">');

    let skusInfo = '';

    if(line.skus && typeof line.skus != 'object'){

        try{

            let skus = JSON.parse(line.skus);
    
            if(skus && skus.length && skus.length > 1){
    
                skusInfo += '<br><div class="skus-info">' + skus.length + ' variantes</div>';
                
            } else{
    
                skusInfo += '<br><div class="create-sku">Criar variante</div>';
    
            }
            
        } catch(e){
    
            console.error(e);
    
        }
    
    }

    let json;
    let product_id = '';

    try{

        json = JSON.parse(line.json);

        if(json.id) product_id = json.id;
        
    } catch(e){


        
    }

    lineElm.append('<div class="title"><span data-name="id">' + product_id + '</span></div>');

    if(!line.reference) line.reference = '';

    lineElm.append('<div class="title"><span data-name="Código de Referencia">' + line.reference + '</span>' + skusInfo + '</div>');

    lineElm.find('.create-sku, .skus-info').on('click', () => {

        Approve.showSkus(line);

    });

    lineElm.append('<div class="title name-item"><span class="name-edit" data-name="Nome">' + line.name + '</span></div>');

    lineElm.find('.name-edit').on('click', () => {

        Approve.askName(line);

    });

    // After name edit, lets add the counter of characters, in a circle
    lineElm.find('.name-edit').after('<div class="counter" title="Quantidade de Caracteres"></div>');

    if(line.name) lineElm.find('.counter').text(line.name.length);

    if(!line.brand) line.brand = '';

    let brand = line.brand.name ? line.brand.name : line.brand ? line.brand : '';  

    lineElm.append('<div class="title" data-name="Marca">' + brand + '</div>');
    
    let ean = line.ean;

    if(!ean) ean = '';
    else ean = '<span class="ask-ean">' + ean + '</span>';

    // if(line.suggested){

    //     let suggested = {}

    //     try{
    //         suggested = JSON.parse(line.suggested);
    //     } catch(e){
            
    //     }

    //     if(suggested.ean && suggested.ean.length){

    //         ean = '<span class="ask-ean suggest-style">EANs sugeridos</span>';

    //     }

    // }

    lineElm.append('<div class="title category-item">' + category + '</div>');
    lineElm.append('<div class="title" data-name="Ean">' + ean + '</div>');
    
    let titleControls = $('<div class="title controls"></div>');
    let editButton = $('<button class="only-icon edit"><img src="img/icons/register.svg"></div></button>');
    let approveButton = $('<button class="only-icon approve"><img src="img/icons/check.svg"></div></button>');
    let removeButton = $('<button class="only-icon remove"><img src="img/icons/trash-black.svg"></div></button>');

    titleControls.append(editButton);
    titleControls.append('&nbsp;&nbsp;');
    titleControls.append(approveButton);
    titleControls.append('&nbsp;&nbsp;');
    titleControls.append(removeButton);

    lineElm.append(titleControls);
    
    Approve.lineListeners(lineElm, line);

    return lineElm;

};

Approve.enhancementSearchDebounce = null;

Approve.enhancementSearch = () => {

    let search = $('.search').val();

    if(search == Approve.lastEnhancementSearch) return;

    Approve.lastEnhancementSearch = search;

    if(Approve.enhancementSearchDebounce) clearTimeout(Approve.enhancementSearchDebounce);

    Approve.enhancementSearchDebounce = setTimeout(() => {

        Approve.enhancementPage = 1;
        Approve.enhancementPagesRequested = [];
    
        Approve.enhancementLoad();

    }, 500);

};

Nav.addTrigger('/aprovacao/enriquecimento', async () => {

    Approve.lastEnhancementSearch = null;

    Approve.enhancementPage = 1;
    Approve.enhancementPagesRequested  = [];

    $('.header').on('typed', function(){

        Approve.addControls($(this));

    });

    Approve.updateOrderByText();

    Approve.enhancementLoad();

});