'use strict';

document.addEventListener('DOMContentLoaded', function () {
    //Add csrf token for all axios requests.
    window.axios.defaults.headers.common = {
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    };

    //Make the tabs work
    new TabsController('tab-content', 'entity-tabs', 'active', true, 'input[name="tabslug"]');

    //Add a style manager for the visible save button
    //enable save button when present
    let visibleSaveButton = document.getElementById('save-button');
    let saveButtonStyleController = new styleClassController(visibleSaveButton);
    if(visibleSaveButton) {
        let realSaveButton = document.querySelector('input[value="submit-cloaked"]');
        visibleSaveButton.addEventListener('click', function (visibleSaveButtonClickEvent) {
            visibleSaveButtonClickEvent.preventDefault();
            saveButtonStyleController.requestAddClass('disabled');
            realSaveButton.click();
        });
    }

    //Make the trash button only work when it is confirmed by a model
    const trashButton = document.querySelector('.js-open-confirmation');
    if(trashButton) new ConfirmationController(trashButton);

    //Get the form and its translations
    let form = document.getElementById('entity-form');
    let globalTranslations = (form) ? form.dataset.globalTranslations :{};

    //Create an attributeInitializer that will look inside of the selected element and when something changes in it, triggers callbacks if needed
    let attributeInitializer = new Initializer('#entity-form'); //For the entity form and its attributes.
    let entitiesListInitializer = new Initializer('#entities'); //For the sidebar

    //Make sure the component areas can copy data to each other
    if(form) {
        let componentAreaCopier = new ComponentAreaCopier();

        //Make sure all component areas will be initialized when they show up
        attributeInitializer.bindSelectorToCallback('.js-components-area', function(attributesInitializer, componentAreaAttributeElement) {
            let componentAreaManager = new ComponentAreaManager(componentAreaAttributeElement, new ComponentManagerApiController());
            componentAreaCopier.registerComponentAreaManager(componentAreaManager);
            componentAreaManager.on('componentAdded', function(componentHtmlElement, loaded) { //Loaded is true when the complete controller finished the initial component load from the savestate. This initial load also triggers componentAdded 'events'.
                if(loaded && preventNavigationController) {
                    preventNavigationController.refresh(); //Refresh, since there will be more inputs. The ones of the sortable.
                }
            });
        });
    }

    //Make sure all documents attributes are initialized when they show up.
    attributeInitializer.bindSelectorToCallback('.entity-attribute-documents', function(attributesInitializer, documentsGroupAttributeElement) {
        let uploadRoute = form.dataset.uploadRoute;
        let maxPostSize = form.dataset.maxPostSize;
        let maxUploadSize = form.dataset.maxUploadSize;
        let html5Uploader = new HTML5Uploader(uploadRoute, maxPostSize, maxUploadSize, globalTranslations);
        let documentManager = new DocumentManager(documentsGroupAttributeElement, html5Uploader, globalTranslations);

        new FileDragAndDropHandler(documentsGroupAttributeElement.querySelector('.drag-and-drop-area'))
            .hookTo(documentManager);


        //Enable or disable the save button depending on the uploads
        html5Uploader.on('uploadStart', function () {
            saveButtonStyleController.requestAddClass('disabled')
        });
        html5Uploader.on('uploadComplete', function () {
            saveButtonStyleController.requestRemoveClass('disabled')
        });
        html5Uploader.on('uploadCanceled', function () {
            saveButtonStyleController.requestRemoveClass('disabled')
        });
        html5Uploader.on('uploadFailed', function () {
            saveButtonStyleController.requestRemoveClass('disabled')
        });
    });

    attributeInitializer.bindSelectorToCallback('.entity-attribute-multiselect-combo-box', function(attributesInitializer, multiselectComboBoxAttributeElement) {
        if(multiselectComboBoxAttributeElement.dataset.readonly === 'false') {
            let multiSelect = new MultiSelect(multiselectComboBoxAttributeElement);
        }
    });

    attributeInitializer.bindSelectorToCallback('.entity-attribute-on-off', function(attributesInitializer, onOffAttributeElement) {
        let onOff = new OnOff(onOffAttributeElement);
    });

    attributeInitializer.bindSelectorToCallback('.js-video', function(attributesInitializer, videoAttributeElement) {
        let video = new Video(videoAttributeElement);
    });

    //Make sure all confirmable things are initialized when they show up
    attributeInitializer.bindSelectorToCallback('.js-confirm', function(attributesInitializer, confirmableHtmlElement) {
        new ConfirmationController(confirmableHtmlElement);
    });

    attributeInitializer.bindSelectorToCallback('.entity-attribute-select', function(attributesInitializer, selectAttributeElement) {
        let select = new Select(selectAttributeElement);
    });

    attributeInitializer.bindSelectorToCallback('.entity-attribute-send-password-mail-button', function(entitiesListInitializer, passwordMailButtonWrapper) {
        let passwordMailButton = new SendPasswordMailButton(passwordMailButtonWrapper)
    });

    attributeInitializer.bindSelectorToCallback('[data-to-copy]', function(attributesInitializer, element) {
        console.log('found copy text element');
        new CopyText(element);
    });

    entitiesListInitializer.bindSelectorToCallback('.js-sortable', function(entitiesListInitializer, sortableListElement) {
        //Create a new instance of the sortable controller
        let sortableController = new SortableController(sortableListElement);

        //Load the HTML elements in the ul
        let loadedPromise = sortableController.load();
        loadedPromise.then(function (rootUl) {
            if(preventNavigationController) {
                console.log('Refreshing the prevent navigation controller since there may be more anchors.');
                preventNavigationController.refresh(); //Refresh, since there will be more anchors. The ones of the sortable.
            }
        }).catch(function (errorMessage) {
            console.error(errorMessage)
        });
    });

    //Make sure all tiny mce editors are initialized //TODO. needs fix
    attributeInitializer.bindSelectorToCallback('textarea.tiny-mce', function (attributesInitializer, inputElement) {
        if(!inputElement.id) inputElement.id = (new Date().getTime())+Math.random().toString(36).substring(7); //Gives the element a random id if it does not have any. Makes it selectable by tinyMce's remove method.
        tinymce.remove('#'+inputElement.id); //Removes the previous tiny mce editor instance if any.
        tinymce.init({
            target: inputElement,
            menubar: false,
            statusbar: false,

            plugins: 'code paste link lists directionality',
            toolbar: 'styleselect | bold italic strikethrough | numlist bullist | link unlink | outdent indent | code ',
            height: '200',
            paste_as_text: true,
            style_formats: [{title: 'Paragraaf', block: 'p'}, {title: 'Subtitel', block: 'h3'}, {title: 'Titel', block: 'h2'}],
            convert_urls: false,
            setup: function(editor) {
                editor.on('change', function(changeEvent) {
                    // ensure the current element is passed, not just the last one
                    (function(input) {
                        return updateOriginalInput(editor, input);
                    })(inputElement)
                });
            }
        });

        function updateOriginalInput(tinyMceEditor, inputElement) {
            tinyMceEditor.save();
            let changeEvent = createNewEvent('change');
            dispatchEventForElement(inputElement, changeEvent);
        }
    }, false);

    //Start looking for changes in #entity-form. And if one occurs, check if it did include one of the bound selector.
    attributeInitializer.startObserving();

    //Start looking for changes in the entities list (since they may be loaded async). And if one occurs, check if it did include one of the bound selector.
    entitiesListInitializer.startObserving();

    let entityAttributesContainer = document.querySelector('.entity-attributes');
    let preventNavigationController = null;
    if(entityAttributesContainer) preventNavigationController = new PreventNavigationController(entityAttributesContainer);
});
(function ($) {

    // Hierarchical list
    $('.entities-list-item .dropdown-icon').click(function (e) {
        e.preventDefault();
        if ($(this).parent().parent().hasClass('open')) {
            //$('.animate-to-triangle', this)[0].beginElement();
            $(this).parent().parent().removeClass('open');
        } else {
            //$('.animate-to-minus', this)[0].beginElement();
            $(this).parent().parent().addClass('open');
        }
    });

    var toggled = true;

    // Scroll to active item in list
    $(window).load(function () {

        if ($('#entity-form .lock').hasClass('open')) {
            toggled = false;
            $('#entity-form').find('input, textarea').attr('disabled', toggled);
        }


        var $container = $('#entities .entities-list:visible');
        var $activeListItem = $('.active', $container).first();
        if ($activeListItem.length == 0) return;
        var top = $activeListItem.position().top;
        $container.scrollTop(top);


        $('.site-brand-name input').attr('placeholder', $('#global_name').val())

    });

    $('#global_name').change(function () {
        $('.site-brand-name input').attr('placeholder', $(this).val())
    });


    //error accordian
    $('.error-accordion .collapsible-ul').hide();
    $('.error-accordion h3').click(function () {
        $(this).parent().find('.collapsible-ul').toggle();
    });

    //$('.order-status.selectize').selectize();


    // Product category selector

    //$('#productCategorySelector').selectize();

    //$('#selectYearAndMonthForm select').selectize();

    $('#selectYearAndMonthForm select').change(function () {
        var location = '/kms/orders/voltooid?month=' + $('#selectYearAndMonthForm select#orderMonthSelector').val() + '&year=' + $('#selectYearAndMonthForm select#orderYearSelector').val();
        window.location = location;
    })

    $('#productCategorySelector').change(function () {
        window.location = '/kms/products?category=' + encodeURIComponent(this.value);
    });

    // Flash messages
    var hideFlashMessage = function () {
        $('#flash-message').fadeOut();
    };
    $('#flash-message').click(function () {
        hideFlashMessage();
    });
    setTimeout(function () {
        hideFlashMessage();
    }, 5000);


    //var toggled = true;
    $('#entity-form .lock').click(function () {
        $(this).toggleClass('open')
        toggled = !toggled;
        $(this).parents('#entity-form').find('input, textarea').attr('disabled', toggled);

    })



    /* grab important elements */
    var sortInput = jQuery('#sort_order');
    var submit = jQuery('#autoSubmit');
    var messageBox = jQuery('#message-box');
    var list = jQuery('.fieldGroupItems');
    /* create requesting function to avoid duplicate code */

    /* worker function */
    var fnSubmit = function(save) {
        var sortOrder = [];
        list.children('li').each(function(){
            sortOrder.push(jQuery(this).data('id'));
        });
        sortInput.val(sortOrder.join(','));
        console.log(sortInput.val());
        if(save) {
            request();
        }
    };
    /* store values */
    list.children('li').each(function() {
        var li = jQuery(this);
        li.data('id',li.attr('title')).attr('title','');
    });
    /* sortables */
    list.sortable({
        opacity: 0.7,
        update: function() {

        }
    });

    /* ajax form submission */
    jQuery('#dd-form').bind('submit',function(e) {
        if(e) e.preventDefault();
        fnSubmit(true);
    });


})(jQuery);

document.addEventListener('DOMContentLoaded', function() {
    let activeListItem = document.querySelector('#sidebar .navigation li.active');

    //Make parent menu items (li with class has-sub-items) also active
    function makeParentListItemsActiveIfHasClassHasSubItems(liElement)
    {
        let parent = liElement.parentElement ? liElement.parentElement : liElement.parentNode; // Stupid IE11
        if(parent.classList.contains('has-sub-items') && parent.tagName === "LI") {
            parent.classList.add('active');
            makeParentListItemsActiveIfHasClassHasSubItems(parent);
        }
    }

    if(activeListItem) {
        makeParentListItemsActiveIfHasClassHasSubItems(activeListItem);
    }

    //Make site list items openable by toggling a class tot them when clicked
    let siteListItems = document.querySelectorAll('#sidebar .navigation .has-sub-items');
    let siteListItemsLength = siteListItems.length;
    for(let i = 0; i < siteListItemsLength; i++){
        let siteListItem = siteListItems[i];

        siteListItem.addEventListener('click', function (ev) {
            this.classList.toggle('active');
            makeParentListItemsActiveIfHasClassHasSubItems(this);
            ev.stopImmediatePropagation();
        });
    }
});