import TabsController from "./entity/tabs";
import Initializer from "./entity/initializer";
import ConfirmationController from "./entity/confirmationController";

import {TinyMCEController} from "./global/tinymce";
import {HTML5Uploader} from "./controllers/HTML5Uploader";
import ComponentAreaCopier from "./controllers/componentAreaCopier";
import SidebarMenuActivator from "./controllers/sidebarMenuActivator";
import {FileDragAndDropHandler} from "./controllers/fileDragAndDropHandler";
import {ComponentAreaManager, ComponentManagerApiController} from "./controllers/componentAreaManager";

import {OnOff} from "./attributes/onOff";
import {Video} from "./attributes/video";
import {Select} from "./attributes/select";
import CopyText from "./attributes/copyText";
import {Numeric} from "./attributes/numeric";
import DatepickerController from "./attributes/datepickerController";
import {Checkboxes} from "./attributes/checkboxes";
import {MultiSelect} from "./attributes/multiSelect";
import {DocumentManager} from "./attributes/documents";
import {QuantityDiscount} from "./attributes/quantity_discount";
import {SendPasswordMail} from "./attributes/SendSetPasswordMailButton";
import {PasswordController} from "./attributes/password";
import SearchController from "./entities/searchable";
import {SortableController} from "./entities/sortable";
import PreventNavigationController from "./entity/preventNavigationController";

import './main'
import {SaveButtonController} from "./controllers/saveButtonController";
import StyleClassController from "./controllers/styleClassController";

window.SearchController = SearchController; //TODO Refactor blade that uses it

document.addEventListener('DOMContentLoaded', function () {
    //Get the document language
    let htmlRootElement = document.querySelector('html');
    let documentIso2Language =  htmlRootElement.getAttribute('lang') ? htmlRootElement.getAttribute('lang') : 'en';

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

    //Make the sidebar work
    SidebarMenuActivator.enable();

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

    //Add a style manager for the visible save button
    //enable save button when present
    let visibleSaveButton = document.getElementById('save-button');
    let realSaveButton = document.querySelector('input[value="submit-cloaked"]');
    const saveButtonStyleController = new StyleClassController(visibleSaveButton);
    let saveButtonController = new SaveButtonController(visibleSaveButton, realSaveButton, form, saveButtonStyleController);

    //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);

    //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-date-picker', function(attributesInitializer, datePickerAttributeElement) {
        let key = datePickerAttributeElement.dataset.key;
        let lang = datePickerAttributeElement.dataset.language;
        let showLongMonths = !!datePickerAttributeElement.dataset.showLongMonths;
        let showAndSelectOtherMonths = !!datePickerAttributeElement.dataset.showAndSelectOtherMonths;
        let showButtonBar = !!datePickerAttributeElement.dataset.showButtonBar;
        let changeYear = !!datePickerAttributeElement.dataset.changeYear;
        let changeMonth = !!datePickerAttributeElement.dataset.changeMonth;
        let animation = datePickerAttributeElement.dataset.animation;
        let dateFormat = datePickerAttributeElement.dataset.dateFormat;
        let timeFormat = datePickerAttributeElement.dataset.timeFormat;
        let translations = datePickerAttributeElement.dataset.translations;

        let datepicker = new DatepickerController(key, lang, showLongMonths, showAndSelectOtherMonths, showButtonBar, changeMonth, changeYear, animation, dateFormat, timeFormat, translations);
    });

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

    attributeInitializer.bindSelectorToCallback('.entity-attribute-checkboxes', function(attributesInitializer, checkboxesAttributeElement) {
        if(checkboxesAttributeElement.dataset.readonly === 'false') {
            let checkboxes = new Checkboxes(checkboxesAttributeElement);
        }
    });

    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-quantity-discount', function(attributesInitializer, quantityDiscountElement) {
        let quantityDiscountController = new QuantityDiscount(quantityDiscountElement);
    });

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

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

    attributeInitializer.bindSelectorToCallback('.entity-attribute-numeric', function(attributesInitializer, element) {
        new Numeric(element); //TEst
    });

    attributeInitializer.bindSelectorToCallback('.entity-attribute-password', function(attributesInitializer, element) {
        let key = element.dataset.key;
        new PasswordController(key, element, saveButtonStyleController, true);
    });

    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.
        TinyMCEController.setup(inputElement, documentIso2Language);
    }, 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);
});