var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var ImageController = function () {
    function ImageController(key, images, maxImages) {
        _classCallCheck(this, ImageController);

        //console.log('Image controller got images: ');
        //console.log(images);

        //console.log('ImageController: key: '+key);
        //console.log('ImageController: maxImages: '+maxImages);
        //
        this.key = key;
        this.currentImageListId = "#image-list-" + key;
        this.fileCounter = 0;
        this.maxImages = maxImages;
        this.images = images;
        //
        this.initialize();
        this.checkNewButtonState();
    }

    _createClass(ImageController, [{
        key: 'initialize',
        value: function initialize() {
            var self = this;

            // Click on an existing image to remove it
            $(self.currentImageListId + ' .image-thumb-li').click(function () {
                $(this).remove();
                self.removeFromImages($('img', this).attr('data-image-id'));
            });

            // When a file is selected for uploading
            $(document).on('click', self.currentImageListId + ' .new-image input', function (e) {
                //console.log(self.countActiveImages());
                if (self.maxImages != '' && self.countActiveImages() >= self.maxImages) {
                    e.preventDefault();
                    return;
                }
            });

            $(document).on('change', self.currentImageListId + ' .new-image input', function () {
                //console.log("images.blade.php: Change event triggered");

                if (self.maxImages != '' && self.countActiveImages() >= self.maxImages) return;

                //console.log('Checking old input element: #'+self.key+'-'+self.fileCounter);
                var $oldInput = $('#' + self.key + '-' + self.fileCounter);
                //console.log("old input: ");
                //console.log($oldInput);
                //console.log("current image list element: "+self.currentImageListId + ' .uploads :');
                //console.log($(self.currentImageListId + ' .uploads'));

                $(self.currentImageListId + ' .uploads').append($oldInput);
                self.images.push({
                    id: null,
                    name: $oldInput.attr('id'),
                    delete: false
                });
                self.updateImages();
                $oldInput.unbind('change');
                //console.log("unbinded change event from the old input element");

                var files = $oldInput.prop('files');
                //console.log("files from property from the old input: ");
                //console.log(files);

                // Removing multiple files doesn't work yet, so it is disabled
                for (var i = 0; i < files.length; i++) {
                    self.insertImage(files[i], self.fileCounter, i);
                }

                self.fileCounter++;
                $(self.currentImageListId + ' .new-image').append('<input type="file" id="' + self.key + '-' + self.fileCounter + '" name="' + self.key + '-' + self.fileCounter + '" accept="image/*" />');
            });

            this.checkNewButtonState();
        }
    }, {
        key: 'insertImage',
        value: function insertImage(file, fileCounter, imageCounter) {
            var self = this;
            //console.log('insertImage');

            var reader = new FileReader();
            reader.onload = function (e) {
                var dataURL = e.target.result;
                $(self.currentImageListId + ' .thumbs').append('' + '<li id="image-thumb-' + this.key + '-' + fileCounter + '-' + imageCounter + '">' + '<img src="' + dataURL + '" />' + '<div class="deleteImage">⨯</div>' + '</li>');
                var thumb = $('#image-thumb-' + self.key + '-' + fileCounter + '-' + imageCounter);
                // Remove image for uploading when clicked
                thumb.click(function () {
                    self.removeFromImages('' + self.key + '-' + fileCounter);
                    thumb.remove();
                    var element = $('#' + self.key + '-' + fileCounter);

                    element.val('');
                    element.remove();
                });
            };
            this.checkNewButtonState();
            reader.readAsDataURL(file);
        }
    }, {
        key: 'checkNewButtonState',
        value: function checkNewButtonState() {
            var button = $(self.currentImageListId + ' .new-image');
            if (this.maxImages !== undefined && this.countActiveImages() >= this.maxImages) {
                //hide the button
                button.hide();
                // //console.log("hide add new image button");
            } else {
                //show the button
                button.show();
                // //console.log("show add new image button");
            }
        }
    }, {
        key: 'updateImages',
        value: function updateImages() {
            var images = JSON.stringify(this.images, null, 2);
            //console.log('Update images: '+images);

            $('#' + this.key).val(images);
            //console.log("Updated images: id:"+'#'+this.key+" with json data:"+JSON.stringify(this.images, null, 2));
            //console.log($('#'+this.key));
            this.checkNewButtonState();
        }
    }, {
        key: 'countActiveImages',
        value: function countActiveImages() {
            //console.log("countActiveImages: ");
            //console.log(this.images);
            var count = 0;
            for (var i = 0; i < this.images.length; i++) {
                if (!this.images[i].delete) count++;
            }
            //console.log("countActiveImages thats: "+count+" length: "+this.images.length);
            return count;
        }
    }, {
        key: 'removeFromImages',
        value: function removeFromImages(idOrFileInputName) {
            //console.log('Removing image: '+idOrFileInputName);
            //console.log('this.images: ');
            //console.log(this.images);
            for (var i = 0; i < this.images.length; i++) {
                if (this.images[i].name == idOrFileInputName) {
                    this.images.splice(i, 1);
                    this.updateImages();
                    return;
                }
                if (this.images[i].id == idOrFileInputName) {
                    this.images[i].delete = true;
                    this.updateImages();
                    return;
                }
            }
        }
    }]);

    return ImageController;
}();

//also @See onOff.blade.php

var OnOff = function () {
    function OnOff() {
        _classCallCheck(this, OnOff);
    }

    _createClass(OnOff, [{
        key: 'toggleOnOff',
        value: function toggleOnOff($id) {
            var onOffBox = document.getElementById($id);
            var onOffSwitch = document.getElementById($id + '-switch');

            if (onOffBox.checked) {
                onOffBox.value = '1';
                onOffSwitch.classList.add('on');
            } else {
                onOffBox.value = '0';
                onOffSwitch.classList.remove('on');
            }
        }
    }, {
        key: 'toggleOnOffSwitch',
        value: function toggleOnOffSwitch($id) {
            var onOffBox = document.getElementById($id);
            onOffBox.checked = onOffBox.checked ? onOffBox.checked = false : onOffBox.checked = true;
            this.toggleOnOff($id);
        }
    }]);

    return OnOff;
}();

var PasswordController = function () {
    /**
     * Validates password fields.
     * The password fields values wil be imploded with a pipe symbol
     *
     * @param passwordInputSelector The css selector for selecting the password input fields
     * @param wrapperSelector The css selector for the wrapper div / element that wraps the first and second input fields along the validation helper
     * @param passwordDontMatchErrorText string
     * @param saveButtonId The id of a save button that needs to be disabled when the passwords are not valid
     * @param minPasswordLength int
     * @param wrapperHasTitleAttributeAndErrorClass Must be set to true if the wrapper (selected with the wrapper selector) has the ability to have an error class and title attribute for displaying an error
     */
    function PasswordController(passwordInputSelector, wrapperSelector, passwordDontMatchErrorText, saveButtonId) {
        var minPasswordLength = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 6;
        var wrapperHasTitleAttributeAndErrorClass = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;

        _classCallCheck(this, PasswordController);

        this.wrapperHasTitleAttributeAndErrorClass = wrapperHasTitleAttributeAndErrorClass;
        this.wrapper = document.querySelector(wrapperSelector);
        this.saveButton = document.querySelector("#" + saveButtonId);
        console.log(this.saveButton);

        this.firstPasswordInput = this.wrapper.querySelector('input[name=' + passwordInputSelector + '-1]');
        this.secondPasswordInput = this.wrapper.querySelector('input[name=' + passwordInputSelector + '-2]');
        this.realPasswordInput = this.wrapper.querySelector('input[name=' + passwordInputSelector + ']');

        this.validationMessageWrapperSelector = '.validationHelper';
        this.validationMessageWrapper = this.wrapper.querySelector(this.validationMessageWrapperSelector);

        this.minPasswordLength = minPasswordLength;

        //Used for validation
        this.letter = this.validationMessageWrapper.querySelector(".letter");
        this.capital = this.validationMessageWrapper.querySelector(".capital");
        this.number = this.validationMessageWrapper.querySelector(".number");
        this.length = this.validationMessageWrapper.querySelector(".length");
        this.match = this.validationMessageWrapper.querySelector(".match");
        // this.noPipe = document.querySelector(this.validationMessageWrapperSelector + " .noPipe");

        this.activateListeners(true);
    }

    /**
     * Activates listening for keyup events on the password fields to that the passwordChanged method is triggered
     *
     * @param state
     */


    _createClass(PasswordController, [{
        key: 'activateListeners',
        value: function activateListeners(state) {
            var self = this;
            var validationHelper = this.validationMessageWrapper;

            if (state) {
                this.firstPasswordInput.addEventListener('keyup', self.debounce(function () {
                    self.passwordChanged();
                }, 100));

                this.secondPasswordInput.addEventListener('keyup', self.debounce(function () {
                    self.passwordChanged();
                }, 100));

                this.firstPasswordInput.addEventListener('focus', function () {
                    if (!validationHelper.classList.contains('active')) validationHelper.classList.add('active');
                });
                this.secondPasswordInput.addEventListener('focus', function () {
                    if (!validationHelper.classList.contains('active')) validationHelper.classList.add('active');
                });

                this.firstPasswordInput.addEventListener('blur', function () {
                    if (validationHelper.classList.contains('active')) validationHelper.classList.remove('active');
                });
                this.secondPasswordInput.addEventListener('blur', function () {
                    if (validationHelper.classList.contains('active')) validationHelper.classList.remove('active');
                });
            } else {
                this.firstPasswordInput.removeEventListener('keyup', self.debounce);
                this.secondPasswordInput.removeEventListener('keyup', self.debounce);

                this.firstPasswordInput.removeEventListener('focus');
                this.secondPasswordInput.removeEventListener('focus');

                this.firstPasswordInput.removeEventListener('blur');
                this.secondPasswordInput.removeEventListener('blur');
            }
        }

        /**
         * Triggered when one of the password fields are changed and if the listeners for those fields are active
         */

    }, {
        key: 'passwordChanged',
        value: function passwordChanged() {
            console.log('password changed');

            var value1 = this.firstPasswordInput.value;
            var value2 = this.secondPasswordInput.value;

            var valid = this.validate(value1, value2);
            console.log(valid);

            if (valid) this.realPasswordInput.value = value2;else this.realPasswordInput.value = '';

            this.enableValidMessage(valid);
            this.enableSaveButton(valid);
            this.removeWrapperError();
        }
    }, {
        key: 'enableValidMessage',
        value: function enableValidMessage(enable) {
            var validationHelper = this.validationMessageWrapper;

            if (enable) {
                if (!validationHelper.classList.contains('valid')) validationHelper.classList.add('valid');
            } else {
                if (validationHelper.classList.contains('valid')) validationHelper.classList.remove('valid');
            }
        }
    }, {
        key: 'enableSaveButton',
        value: function enableSaveButton(enable) {
            console.log(enable);
            if (enable) {
                if (this.saveButton.classList.contains('disabled')) this.saveButton.classList.remove('disabled');
            } else {
                if (!this.saveButton.classList.contains('disabled')) this.saveButton.classList.add('disabled');
            }
        }

        /**
         * Removes the error that may be set on the wrapper
         */

    }, {
        key: 'removeWrapperError',
        value: function removeWrapperError() {
            if (!this.wrapperHasTitleAttributeAndErrorClass) return;

            if (this.wrapper.hasAttribute('title')) this.wrapper.setAttribute('title', '');
            if (this.wrapper.classList.contains('error')) this.wrapper.classList.remove('error');
        }

        /**
         * Validate two values and return true or false if respectively valid or not
         *
         * @param value1
         * @param value2
         * @returns {boolean}
         */

    }, {
        key: 'validate',
        value: function validate(value1, value2) {
            var valid = true;

            // Validate lowercase letters
            var lowerCaseLetters = /[a-z]/g;
            if (value1.match(lowerCaseLetters)) {
                this.letter.classList.remove("invalid");
                this.letter.classList.add("valid");
            } else {
                this.letter.classList.remove("valid");
                this.letter.classList.add("invalid");
                valid = false;
            }

            // Validate capital letters
            var upperCaseLetters = /[A-Z]/g;
            if (value1.match(upperCaseLetters)) {
                this.capital.classList.remove("invalid");
                this.capital.classList.add("valid");
            } else {
                this.capital.classList.remove("valid");
                this.capital.classList.add("invalid");
                valid = false;
            }

            // Validate numbers
            var numbers = /[0-9]/g;
            if (value1.match(numbers)) {
                this.number.classList.remove("invalid");
                this.number.classList.add("valid");
            } else {
                this.number.classList.remove("valid");
                this.number.classList.add("invalid");
                valid = false;
            }

            // Validate numbers
            // let pipe = /\|/g;
            // if(value1.match(pipe)) {
            //     this.noPipe.classList.remove("valid");
            //     this.noPipe.classList.add("invalid");
            //     valid = false;
            // } else {
            //     this.noPipe.classList.remove("invalid");
            //     this.noPipe.classList.add("valid");
            // }

            // Validate length
            if (value1.length >= this.minPasswordLength) {
                this.length.classList.remove("invalid");
                this.length.classList.add("valid");
            } else {
                this.length.classList.remove("valid");
                this.length.classList.add("invalid");
                valid = false;
            }

            // Validate password match
            if (value1 === value2 && (value1 !== '' || value2 !== '')) {
                this.match.classList.remove("invalid");
                this.match.classList.add("valid");
            } else {
                this.match.classList.remove("valid");
                this.match.classList.add("invalid");
                valid = false;
            }

            return valid;
        }

        /**
         * Triggers the function after the wait time (milliseconds) has expired and only
         * if the function is not triggered again before the wait time expired.
         *
         * @param func
         * @param wait
         * @param immediate
         * @returns {Function}
         */

    }, {
        key: 'debounce',
        value: function debounce(func, wait, immediate) {
            var timeout = void 0;

            return function () {
                var context = this,
                    args = arguments;
                var later = function later() {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        }
    }]);

    return PasswordController;
}();
//Also See select.blade.php

$(function () {
    $(".select-menu").selectmenu({
        width: '100%',
        create: function create(event, ui) {
            buttonId = this.id + '-button';
            menuId = this.id + '-menu';
        },
        open: function open(event, ui) {
            var button = document.getElementById(this.id + '-button');
            var menu = document.getElementById(this.id + '-menu');
            menu.style.width = button.offsetWidth + 'px';
            menu.parentNode.style.width = button.offsetWidth + 'px';
            button.classList.add('dropdown-open');
        },
        change: function change(event, ui) {
            var button = document.getElementById(this.id + '-button');
            var buttonText = button.querySelector('.ui-selectmenu-text').innerHTML;
            button.querySelector('.ui-selectmenu-text').innerHTML = buttonText.replace(/&nbsp;/gi, '');
        },
        close: function close(event, ui) {
            var button = document.getElementById(this.id + '-button');
            button.classList.remove('dropdown-open');
        }
    });
});