$( document ).ready(function() {
    setTimeout(() => {
        getBlocks();
        drawUi();
        console.log('ready');
    }, 2000);
});

 let selectedBlock = '';
 let sBlockId;
 let lastSelectedBlock = '';
 let lBlockId = lastSelectedBlock.split('_')[1];
 let multipleBlocksSelected = false;
 let classList = [
    'default',
    'moment',
    'temps',
    'segment',
    'sous_segment',
    'liste',
    'latour',
    'éclairage'    
 ];


 function getBlocks() {
        let sections = $('section[data-id="body"]');
        let index = 0;
        sections.each(function() {
                let content = $(this).find('> * > * > * > * > *');
                let newContent = [];
                content.each(function() {
                    let block = $(this);
                    if ($(block).prop('tagName') === "H4") {
                        return;
                    }
                    index++;
                    let taggedBlock = '';
                    taggedBlock = `<div id="block_${index}" class="block" style="
                        cursor: pointer;">`;
                    taggedBlock += $(block).html();
                    taggedBlock += '</div>';
                    newContent.push(taggedBlock);
                    $(this).empty();
                    $(this).append(taggedBlock);
                    $(this).click(function(e) {
                        if (e.ctrl) {
                            console.log("ctrl+click")
                            blockGrouped($(this))
                        } else {
                            blockClicked($(this))
                        }
                    });
                    //console.log(taggedBlock, index);         
                });
          });
 }

 function drawUi() {
    let uiZone = `
        <div id="uiZone" style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            background-color: white;
            position: fixed;
            top: 0;
            z-index: 1;
            width: 10vw;
            height: 7vw;
        ">

        </div>
    `;
    $('body').append(uiZone);

    let selectedDisplay = `
        <div id="selectedDisplay">
            Pas de block sélectionné
        </div>
    `;
    $('#uiZone').append(selectedDisplay);
    

    let styleDropdown = `
        <div id="dropdown" style="display:none;">
            <label for="classes">Style</label>

            <select name="classes" id="classes">
            </select> 
        </div>
    `;

    $('#uiZone').append(styleDropdown);
    classList.forEach(function(el) {
        let option = `<option value="${el}">${el}</option>`;
        $('#dropdown #classes').append(option);
    })
 }

 function blockClicked(block) {
    let blockId = $(block).children().first().attr('id');
    let idNumber = parseInt(blockId.substr(blockId.indexOf("_") + 1));
    if (selectedBlock && selectedBlock != blockId) {
        $("#" + selectedBlock).toggleClass('selected');
        if (multipleBlocksSelected) {
            if ($('#' + selectedBlock).parent().is('[data-last-split-element]')) {
                $('#block_' + (sBlockId + 1)).toggleClass('selected');
            } else if ($('#' + selectedBlock).parent().is('[data-split-from]')) {
                $('#block_' + (sBlockId - 1)).toggleClass('selected');
            }
        }
    } else if ((selectedBlock && selectedBlock === blockId)) {
        $(block).children().toggleClass('selected');
        $('#dropdown').css('display', 'none');
        if (multipleBlocksSelected) {
            if ($('#' + selectedBlock).parent().is('[data-last-split-element]')) {
                $('#block_' + (sBlockId + 1)).toggleClass('selected');
            } else if ($('#' + selectedBlock).parent().is('[data-split-from]')) {
                $('#block_' + (sBlockId - 1)).toggleClass('selected');
            }
        }
        selectedBlock = '';
        $('#selectedDisplay').empty().append('Pas de block sélectionné');
        return;
    }

    $(block).children().first().toggleClass('selected');

    if ($('#' + blockId).attr('class') == 'block') {
        $('#' + blockId).addClass("default");
    }

    $('#selectedDisplay').empty().append('sélectionné<br>' + blockId);

    selectedBlock = blockId;
    sBlockId = parseInt(selectedBlock.split('_')[1]);

    if ($('#' + blockId).parent().is('[data-last-split-element]')) {
        $('#block_' + (idNumber + 1)).toggleClass('selected');
        if ($('#block_' + (idNumber + 1)).attr('class') == 'block') {
            $('#block_' + (idNumber + 1)).addClass("default");
        }    
        $('#selectedDisplay').append(` -> block_${idNumber + 1}`);
        multipleBlocksSelected = true;
    } else if ($('#' + blockId).parent().is('[data-split-from]')) {
        $('#block_' + (idNumber - 1)).toggleClass('selected');
        if ($('#block_' + (idNumber - 1)).attr('class') == 'block') {
            $('#block_' + (idNumber - 1)).addClass("default");
        }    
        $('#selectedDisplay').append(` -> block_${idNumber - 1}`);
        multipleBlocksSelected = true;
    }
    else {
        multipleBlocksSelected = false;
    }
    

    $('#dropdown').css('display', 'block');
}

function blockGrouped(block) {

}

 function toggleStyle(style, id) {
    $('#' + id).toggleClass(style);
 }


// data split from