let _eventHandlers = {};

let DomHelpers = {
	/**
    * Find parent element by classname and return her or null
    * @return Null|Object;
    */
    findParentByClass: function (elem, classname) {
        let self = this;
        if (elem != null) {
            let parent = elem.parentNode;

            if (parent != null) {
                if (parent.classList && parent.classList.contains(classname)) {
                    return parent;
                } else {
                    return self.findParentByClass(parent, classname);
                }
            }
        }

        return null;
    },

    parseHtmlToDom: function (data) {
        let html = new DOMParser().parseFromString( data , 'text/html');
        return html.body.firstChild;
    },

    addListener: function (node, event, handler, capture) {
        let self = this;

        // Remove prebinded elements
        self.removeAllListeners(node, event);

        if(!(node in _eventHandlers)) {
            // _eventHandlers stores references to nodes
            _eventHandlers[node] = {};
        }
        if(!(event in _eventHandlers[node])) {
            // each entry contains another entry for each event type
            _eventHandlers[node][event] = [];
        }
        // capture reference
        _eventHandlers[node][event].push([handler, capture]);
        node.addEventListener(event, handler, capture);
    },

    removeAllListeners: function (node, event) {
        if(node in _eventHandlers) {
            let handlers = _eventHandlers[node];
            if(event in handlers) {
                let eventHandlers = handlers[event];
                for(var i = eventHandlers.length; i--;) {
                    let handler = eventHandlers[i];
                    node.removeEventListener(event, handler[0], handler[1]);
                }
            }
        }
    },

    overlaysClose: function (notActiveArea, removeFrom, removeClass, callback) {
        let self = this;

        document.addEventListener('click', function (e) {
                let tryFindParentNeed = self.findParentByClass(e.target, notActiveArea);
                let ifCurrentNeed = e.target.classList.contains(notActiveArea);

                if (tryFindParentNeed !== null || ifCurrentNeed) {
                        return false;
                } else {
                        let findElem = document.querySelector(removeFrom);
                        findElem.classList.remove(removeClass);
                }
        }, true);
    }
};

let CustomSelect = {
    config: {
        'modify': '.custom-select',
        'blockClass': 'custom-select-block',
        'selector': 'custom-select-block__main',
        'currentOption': 'custom-select-block__title',
        'options': 'custom-select-block__options',
        'option': 'custom-select-block__option',
		'multiselect': 'custom-select_multiselect',
        'active': 'active',
        'optionSelected': 'custom-select-block__option_state_selected',
        'classOperator': '.'
    },

    init: function () {
        let self = this;
        let config = self.config;
        let items = document.querySelectorAll(config.modify);
        let currentCustom = null;
        let customOptions = null;

        for (let x of items) {
            currentCustom = self.createBlock(x);
            customOptions = currentCustom.querySelectorAll(config.classOperator + config.option);
            for (let i of customOptions) {
                DomHelpers.addListener(i, 'click', function (e) {
                    self.selectOption(e);
                }, false);
            }

            DomHelpers.addListener(currentCustom, 'click', function (e) {
                self.changeVisible(e);
            }, false);

            document.addEventListener('click', function (e) {
                self.outWindowClick(e);
            }, false);
        }
    },

    /**
    * First, we need create block and put in block hidden select
    * @return Object
    */
    createBlock: function (elem) {
        let self = this;
        let config = self.config;
        let currentTitle = 'All';
        let options = "";
        let selected = "";
        let cloned = elem.cloneNode(true);
        let modsClass = " ";
        let ismultiselect = elem.classList.contains(config.multiselect);

        if (cloned.dataset.mods !== undefined) {
            modsClass += cloned.dataset.mods;
        }

        // get all chidrens and create elements with current data
        for (let x of cloned.children) {
            selected = "";
            if (x.selected) {
                selected = " " + config.optionSelected;
                currentTitle = x.textContent;
            }
            options += "<div class='" + config.option + selected + "' data-value='" + x.value + "'>" + x.textContent + "</div>\n"
        }

        // Create first time template
		let firstBlock = "<div class='" + config.currentOption + "'>" + currentTitle + "</div>";
		if (ismultiselect) {
			firstBlock = "";
		}
        let template = "<div class='" + config.blockClass + modsClass + "'>" +
                "<div class='" + config.selector + "'>" +
                    firstBlock+
                "</div>" +
                "<div class='" + config.options + "'>" + options + "</div>" +
            "</div>";

        // Change our html template to dom tree, after that we paste select in this template
        let workNode = DomHelpers.parseHtmlToDom(template);
        workNode.appendChild(cloned);
        elem.parentNode.appendChild(workNode);
        elem.remove();

        return workNode;
    },

    /**
    * Add binds to block
    * @return Object
    */
    changeVisible: function (e) {
        let self = this;
        let config = self.config;
        let parent = (e.target.classList.contains(config.blockClass)) ? e.target : DomHelpers.findParentByClass(e.target, config.blockClass);
        let elems = document.querySelectorAll(config.classOperator + config.blockClass + config.classOperator + config.active);

        for (let x of elems) {
            if (!x.isEqualNode(parent)) {
                x.classList.remove(config.active);
            }
        }

        parent.classList.toggle(config.active);
        return parent;
    },
    /**
    * Catch custom div option and change value for select
    * @return object
    */
    selectOption: function (e) {
        let self = this;
        let config = self.config;
        let target = e.target;
        let rootNode = DomHelpers.findParentByClass(target, config.blockClass);
        let select = rootNode.querySelector(config.modify);
        let selectedOptions = select.selectedOptions
        let findByValue = select.querySelector("[value='" + target.dataset.value + "']");
        let activeCustomOpt = rootNode.querySelectorAll(config.classOperator + config.optionSelected);
        let ismultiselect = select.classList.contains(config.multiselect);

        if (!ismultiselect) {
            // Now remove select statuses from another options and set selected option
            rootNode.querySelector(config.classOperator + config.currentOption).textContent = target.textContent;

            for (let x of selectedOptions) {
                x.selected = null;
            }
            select.value = null;
            findByValue.value = target.dataset.value;
            // Remove old statuses and add new
            for (let x of activeCustomOpt) {
                x.classList.remove(config.optionSelected);
            }
        } else {
            if (!findByValue.selected) {
                let template = "<div class='" + config.currentOption + "' data-value='" + target.dataset.value + "'>" + target.textContent + "</div>";
                let workNode = DomHelpers.parseHtmlToDom(template);
                rootNode.querySelector(config.classOperator + config.selector).appendChild(workNode)
            }
        }

        if (!ismultiselect || ismultiselect && !findByValue.selected) {
            findByValue.selected = true;
            target.classList.add(config.optionSelected);
        } else {
            let selectList = rootNode.querySelectorAll(config.classOperator + config.currentOption);
            findByValue.selected = false;
            for (let x of activeCustomOpt) {
                if (x.dataset.value === target.dataset.value) {
                    x.classList.remove(config.optionSelected);
                }
            }

            for (let x of selectList) {
                if (x.dataset.value === target.dataset.value) {
                    x.remove();
                }
            }
        }

        return target;
    },

    /**
    * Close all open selects
    * @return bool
    */
    outWindowClick: function (e) {
        let self = this;
        let config = self.config;
        let target = e.target;
        let checkRoot = DomHelpers.findParentByClass(target, config.blockClass);
        let activeCustomSelects = document.querySelectorAll(config.classOperator + config.blockClass + config.classOperator + config.active);

        if (!target.classList.contains(config.blockClass) && checkRoot == null) {
            for (let x of activeCustomSelects) {
                x.classList.remove(config.active);
            }
            return true;
        }
        return true;
    }
};

let Expander = {
    config: {
        'block': 'expander',
        'element': 'expander__item',
        'container': 'expander__block',
        'active': 'active',
		'animated': 'animated',
        'separator': '.'
    },

    init: function () {
        let self = this;
        let config = self.config;
        let elems = document.querySelectorAll(config.separator + config.element);

        for (let x of elems) {
            DomHelpers.addListener(x, 'click', function (e) {
                self.changeVisible(e);
            }, false);
        }
    },

    changeVisible: function (e) {
        let self = this;
        let config = self.config;
        let parentNode = DomHelpers.findParentByClass(e.target, config.block);
        let classes = parentNode.classList;
        let whatcanido = (classes.contains(config.deactive)) ? [config.active, config.deactive] : [config.deactive, config.active];

        if (classes.contains(config.active) && !classes.contains(config.animated)) {
            classes.add(config.animated);
        }

        classes.toggle(config.active);
    }
};

let Validator = {
	config: {
            'defForm': 'form-validator',
            'errorBlock': 'form-validator__message',
            'errorClass': 'form-validator__error',
            'dataPatternElem': 'pattern',
            'dataPatternElemText': 'error',
            'active': 'active',
            'separator': '.'
	},

	init: function () {
            let self = this;
            let config = self.config;
            let defElems = document.querySelectorAll(config.separator + config.defForm);

            for (let x of defElems) {
                DomHelpers.addListener(x, 'submit', function (e) {
                    if (self.checkInputs(e)) {
                        return true;
                    }

                    e.preventDefault();
                }, false);
            }
	},

	checkInputs: function (elem) {
            let self = this;
            let config = self.config;
            let element = elem.target;
            let valElems = element.querySelectorAll('[data-' + config.dataPatternElem + ']');
            let noErr = valElems.length;

            for (let x of valElems) {
                if (self.checkRule(x)) {
                    noErr--;
                }
            }

            return (noErr > 0) ? false : true;
	},

	checkRule: function (elem) {
            let self = this;
            let config = self.config;
            let pattern = elem.dataset[config.dataPatternElem];
            let val = elem.value;
            let parent = elem.parentNode;
            if (!parent) {
                alert('fck u');
            }
            let errorBlock = parent.querySelector(config.separator + config.errorBlock);

            if (pattern) {
                let regexp = new RegExp(pattern, 'gm');
                let errorText = elem.dataset[config.dataPatternElemText];
                if (!regexp.test(val)) {
                    if (errorBlock) {
                        errorBlock.textContent = errorText;
                        errorBlock.classList.add(config.active);
                    }
                    elem.classList.add(config.errorClass);

                    return false;
                }
            }

            elem.classList.remove(config.errorClass);
            if (errorBlock) {
                    errorBlock.classList.remove(config.active);
            }

            return true;
	}
};

let ScrollTo = {
    config: {
        'element': 'scrollto',
        'data_attr': 'scroll',
        'speed': 400,
        'separator': '.'
    },

    init: function () {
        let self = this;
        let config = self.config;
        let elems = document.querySelectorAll(config.separator + config.element);

        for (let x of elems) {
            DomHelpers.addListener(x, 'click', function (e) {
                let to_element = e.target.dataset[config.data_attr];
                if (to_element) {
                    let elem = document.querySelectorAll(to_element);
                    if (elem) {
                        self.block(elem, 'html');
                    }
                }
            }, false);
        }
    },

    block: function (to_element, fromBlock) {
        let self = this;
        let config = self.config;
        let current_duration = 0;
        let start_block = document.querySelector(fromBlock);
        let start_offset_height = start_block.offsetHeight / 2;
        let current_position = start_block.scrollTop;
        if (to_element) {
            let point_position = to_element.offsetTop;
            let distance = (point_position - current_position);
            console.log(distance);
            const animateScroll = (() => {
                current_duration += 20;
                const val = self.easeInOutQuad(current_duration, current_position, distance, config.speed);
                start_block.scrollTop = val;
                console.log(val);

                if (current_duration < config.speed) {
                    setTimeout(animateScroll, 20);
                }
            });

            animateScroll();
        }

        return false;
    },

    easeInOutQuad: function (t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    }
};

Validator.init();
Expander.init();
CustomSelect.init();

let ckeEdit = document.querySelectorAll('#editor');

for (let x of ckeEdit) {
    ClassicEditor.create( x ).catch(error => {
        console.error( error );
    });
}