var module = {}
window.addEventListener('load', function () {

    var maincontent = this.document.querySelector('#main');

    if (maincontent) { maincontent.style.minHeight = (window.innerHeight - document.body.clientHeight + maincontent.clientHeight) + "px"; }

})

window.addEventListener('DOMContentLoaded', function () {

    module.flexslider.render();
    module.tab.render();
    module.navigation.render();
    module.sizechart.render();
    module.cspt.render();
    module.contact.render();


})

window.addEventListener('click', function (e) {
    var target = e.target;

    switch (target.dataset.id) {
        case 'btn-search':
            this.document.querySelector('.search-modal.form-holder').style.display = 'block';
            break;
        case 'btn-close-search':
            this.document.querySelector('.search-modal.form-holder').style.display = 'none';
            break;

        case 'btn-navigation-toggle':
            this.document.querySelector('.main-navigation').classList.add('open')
            this.document.body.classList.add('menu-open');
            break;
        case 'btn-close-menu':
            this.document.querySelector('.main-navigation').classList.remove('open')
            this.document.body.classList.remove('menu-open');
            break;
        case 'show-password-input':
            var input = target.parentElement.querySelector('input');
            if (input) {
                if (input.type == 'password') {
                    input.type = 'text';
                    target.classList.add('fa-eye-slash')
                    target.classList.remove('fa-eye')
                } else {
                    input.type = 'password';
                    target.classList.add('fa-eye')
                    target.classList.remove('fa-eye-slash')
                }
            }
            break;

    }


    if (target.dataset.ajax) {
        if (module.ajax[target.dataset.ajax] !== void 0 && typeof module.ajax[target.dataset.ajax] === 'function') {
            module.ajax[target.dataset.ajax](target)
        }
    }

})

module.contact = (function () {
    function contact() { }

    contact.render = function(){
        var nodes = document.querySelectorAll('.cstyle-contact');
        nodes.forEach(node=>{
            (new contact()).bindElement(node);

            
        })
    }

    contact.prototype.bindSelector = function (selector) {
        var element = document.querySelector(selector);
        if (element) {
            this.bindElement(element);
        }
        return this;
    }
    contact.prototype.bindElement = function (element) {
        this.element = element;

        this.submit_button = element.querySelector(".cstyle-contact-submit-button");
        this.loading_element = element.querySelector(".cstyle-contact-loading");
        this.output = element.querySelector(".cstyle-contact-response-output");

        this.submit_button.addEventListener("click", this.submit.bind(this));

        return this;
    }

    contact.prototype.submit = function () {
        this.loading(true);
        this.setOutput('');

        fetch('/ajax', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(this.get_data()),
        }).then(response => {
            return response.json()
        })
            .then(data => {
                this.loading(false);
                this.setOutput(data.msg);
                if (data.code == "success") {
                    this.clear_data();
                }
            }).catch(error => {
                this.loading(false);
            })

    }
    contact.prototype.get_data = function () {
        var obj = {}
        var nodes = this.element.querySelectorAll("[name]");
        nodes.forEach(n => {
            if (n.name) {
                obj[n.name] = n.value || ""
            }
        })

        obj.action = 'cstylecontact';
        return (obj)
    }

    contact.prototype.clear_data = function () {
        var nodes = document.querySelectorAll("input[name]");
        nodes.forEach(n => {
            n.value = '';
        })
    }

    contact.prototype.setOutput = function (message) {
        this.output.innerHTML = message;
        this.output.style.display = message ? 'block' : 'none';
    }

    contact.prototype.loading = function (start_loading) {
        if (start_loading) {
            this.loading_element.classList.add('start-loading');
            this.submit_button.disabled = true;
        } else {
            this.loading_element.classList.remove('start-loading');
            this.submit_button.disabled = false;
        }
    }

    return contact;
}())
module.search_form = (function () {

    function search() { }

    search.prototype.displayButtons = [];
    search.prototype.closeButton = [];

    search.prototype.bindSelector = function (selector) {
        var element = document.querySelector(selector);
        if (element) {
            this.bindElement(element);
        }
        return this;
    }
    search.prototype.bindElement = function (element) {
        this.element = element;
        return this;
    }

    search.prototype.addDisplayWithSeletor = function (selector) {
        var nodes = document.querySelectorAll(selector);
        nodes.forEach(e => {
            this.addDisplayButton(e);
        })
        return this;
    }
    search.prototype.addDisplayButton = function (element) {
        if (this.displayButtons.indexOf(element) === -1) {
            this.displayButtons.push(element);
            element.addEventListener('click', () => {
                this.element.style.display = 'block';
            })
        }
        return this;
    }

    search.prototype.addCloseWithSelector = function (element) {

        var nodes = document.querySelectorAll(selector);
        nodes.forEach(e => {
            this.addCloseButton(e);
        })
        return this;
    }

    search.prototype.addCloseButton = function (element) {
        if (this.closeButton.indexOf(element) === -1) {
            this.closeButton.push(element);
            element.addEventListener('click', () => {
                this.element.style.display = 'none';
            })
        }

        return this;
    }

    search.instance = function () {
        if (!this._instance) {
            this._instance = new search();
        }
        return this._instance;
    }

    return search;
}());
module.select_selection = (function () {

    function selection() { }

    selection.element_list = [];

    selection.init = function () {
        window.addEventListener('click', (e) => {
            var target = e.target;
            var module = target.getAttribute('module');
            if (module == 'ec-select-selection') {
                e.stopPropagation();
                var obj = this.checkElement(target);
                obj.toggle();
                // console.log('select-selection.checkElement', obj)
            } else {
                this.element_list.forEach(n => {
                    n.hidden();
                })
            }

        })
    }

    selection.checkSelector = function (selector) {
        var element = document.querySelector(selector);
        if (!element) return null;
        return this.checkElement(element);
    }
    selection.checkElement = function (element) {
        for (var i = 0; i < this.element_list.length; i++) {
            var n = this.element_list[i];
            if (n.element == element) {
                return n;
            }
        }
        var obj = new selection();
        obj.bindElement(element);
        this.element_list.push(obj);

        return obj;
    }

    selection.render = function () {

        var selector = '[module="ec-select-selection"]';

        var nodes = document.querySelectorAll(selector);

        nodes.forEach(e => {

            for (var i = 0; i < this.element_list.length; i++) {
                var n = this.element_list[i];
                if (n.element == e) {
                    return;
                }
            }

            var obj = new selection();
            obj.bindElement(e);
            this.element_list.push(obj);

        })

    }
    selection.prototype.element = null;
    selection.prototype.select = null;
    selection.prototype.placeholder = null;
    selection.prototype.callback = null;

    selection.prototype.bindElement = function (element) {
        this.element = element;
        this.select = element.querySelector('select');
        this.placeholder = element.querySelector('.select-selection__placeholder');
        this.search = element.querySelector('.select-selection-search__field');
        this.buildLi();

        this.element.addEventListener('click', (e) => {
            e.stopPropagation();

            if (e.target == this.element) {
                this.toggle();
                this.resetLiDisplay();
                this.search.value = '';
                this.search.focus();
                this.search.select();
                return;
            }

            switch (e.target.dataset.id) {
                case 'select-selection-results-item':
                    var value = e.target.getAttribute('value');
                    if (this.select.value != value) {
                        this.select.value = value;
                        if (typeof this.callback === 'function') {
                            this.callback(value);
                        }

                        var event = new Event('change', { bubbles: true })
                        this.select.dispatchEvent(event);
                    }

                    this.placeholder.innerHTML = e.target.innerHTML;
                    this.selectValue(value);
                    this.hidden();
                    break;
            }
        })

        this.search.addEventListener('input', () => {
            var value = this.search.value.trim().toLocaleLowerCase();
            if (!value) {
                this.resetLiDisplay();
                return;
            }

            var nodes = this.element.querySelectorAll('.select-selection-results li');
            nodes.forEach(n => {
                var text = n.innerText.toLocaleLowerCase();
                n.style.display = text.indexOf(value) == -1 ? 'none' : 'block';
            })


        })


    }

    selection.prototype.resetLiDisplay = function () {
        var nodes = this.element.querySelectorAll('.select-selection-results li');
        nodes.forEach(n => {
            n.style.display = 'block';
        })
    }

    selection.prototype.rebuildSelect = function (data, placeholder) {
        this.select.innerHTML = '';
        this.placeholder.innerHTML = placeholder;
        var ul = this.element.querySelector('.select-selection-results ul')
        ul.innerHTML = '';

        var op1 = document.createElement('option');
        op1.value = '';
        op1.innerHTML = placeholder;
        this.select.append(op1);
        for (var x in data) {
            var option = document.createElement('option');
            option.value = x;
            option.innerHTML = data[x];
            this.select.append(option);
        }

        this.buildLi();
    }

    selection.prototype.buildLi = function () {
        var nodes = this.element.querySelectorAll('.select-selection-results li');
        if (nodes.length != 0) return;
        var ul = this.element.querySelector('.select-selection-results ul')
        nodes = this.select.querySelectorAll('option');
        nodes.forEach(n => {
            if (n.value) {
                var option = document.createElement('li');
                option.innerHTML = n.innerHTML;
                option.setAttribute('value', n.value);
                option.dataset.id = 'select-selection-results-item';
                ul.append(option)
            }
        })

    }

    selection.prototype.toggle = function () {
        this.element.classList.toggle('active');
        var value = this.select.value;
        if (value) {
            this.selectValue(value);
        }
    }

    selection.prototype.hidden = function () {
        this.element.classList.remove('active');
    }

    selection.prototype.selectValue = function (value) {

        var nodes = this.element.querySelectorAll('.select-selection-results li');
        var selectNode = null;
        nodes.forEach(n => {
            var v = n.getAttribute('value');
            if (v == value) {
                n.classList.add('selected');
                selectNode = n;
            } else {
                n.classList.remove('selected');
            }
        })

        if (selectNode) {
            selectNode.scrollIntoView({ behavior: "smooth", block: "center" });

            // var ul = this.element.querySelector('.select-selection-results ul');
            // ul.scrollTo({
            //     behavior: 'smooth',
            //     top: selectNode.clientTop
            // })
        }


    }

    selection.init();

    return selection;
}());

module.image_zoom = (function () {
    function zoom() { }


    zoom.prototype.setImages = function (list, index) {
        if (list.length == 0) return;
        index = index === void 0 ? 0 : index;
        this.index = index;
        this.list = list;

        this.buildView();

        this.ul.innerHTML = '';
        list.forEach(element => {
            var li = document.createElement('li');
            var img = document.createElement('img');
            img.src = element.large_image;
            li.append(img);
            this.ul.append(li);
        });

        this.position_wrap.style.width = list[0].large_image_width + 'px';
        this.position_wrap.style.height = list[0].large_image_height + 'px';

        this.text.innerHTML = (this.index + 1) + ' / ' + this.list.length;


        this.scroll();

    }

    zoom.prototype.buildView = function () {

        if (!this.view) {
            this.view = document.createElement('div');
            this.view.classList = 'flexslider-zoom';

            this.tools = document.createElement('div');
            this.tools.classList = 'flexslider-zoom-tools';

            this.text = document.createElement('div');
            this.text.classList = 'flexslider-zoom-text';

            this.view.append(this.tools, this.text);

            this.zoomButton = document.createElement('button');
            this.zoomButton.classList = 'flexslider-zoom-tools-item zoom';
            this.zoomButton.dataset.id = 'flexslider-zoom-zoom';

            this.fullscreenButton = document.createElement('button');
            this.fullscreenButton.classList = 'flexslider-zoom-tools-item fullscreen';


            this.closeButton = document.createElement('button');
            this.closeButton.classList = 'flexslider-zoom-tools-item close';
            this.closeButton.dataset.id = 'flexslider-zoom-close';

            this.tools.append(this.zoomButton, this.closeButton);



            this.content = document.createElement('div');
            this.content.classList = 'flexslider-zoom-content';
            this.view.append(this.content);

            this.position_wrap = document.createElement('div');
            this.position_wrap.classList = 'flexslider-zoom-position_wrap';

            this.prveButton = document.createElement('button')
            this.prveButton.classList = 'flexslider-zoom-tools-item arrow prev';
            this.prveButton.dataset.id = 'flexslider-zoom-prev';

            this.nextButton = document.createElement('button')
            this.nextButton.classList = 'flexslider-zoom-tools-item arrow next';
            this.nextButton.dataset.id = 'flexslider-zoom-next';


            this.content.append(this.position_wrap, this.prveButton, this.nextButton);

            this.ul = document.createElement('ul');
            this.ul.classList = 'flexslider_slides';
            this.position_wrap.append(this.ul)

            this.view.addEventListener('click', (e) => {
                switch (e.target.dataset.id) {
                    case 'flexslider-zoom-prev':
                        this.index--;
                        if (this.index < 0) {
                            this.index = this.list.length - 1;
                        }
                        this.scroll();
                        break;
                    case 'flexslider-zoom-next':
                        this.index++;
                        if (this.index >= this.list.length) {
                            this.index = 0;
                        }
                        this.scroll();
                        break;
                    case 'flexslider-zoom-zoom':
                        this.position_wrap.classList.toggle('active');
                        break;
                    case 'flexslider-zoom-close':
                        this.view.remove();
                        break;
                }
            })

        }
        document.body.append(this.view);
    }

    zoom.prototype.scroll = function () {
        this.position_wrap.style.width = this.list[this.index].large_image_width + 'px';
        this.position_wrap.style.height = this.list[this.index].large_image_height + 'px';
        this.ul.style.left = '-' + ((this.index) * 100) + '%';

        this.text.innerHTML = (this.index + 1) + ' / ' + this.list.length;
    }

    return zoom;
}())

module.flexslider = (function () {
    function flexslider() { }
    flexslider.list = [];
    flexslider.render = function () {
        var selector = '[module="ec-flexslider"]';

        var nodes = document.querySelectorAll(selector);
        nodes.forEach(n => {
            this.checkElement(n);
        })
    }

    flexslider.checkElement = function (element) {
        for (var i = 0; i < this.list.length; i++) {
            var n = this.list[i];
            if (n.element == element) {
                return n;
            }
        }

        var obj = new flexslider();
        obj.bindElement(element);
        this.list.push(obj);
        return obj;
    }
    flexslider.checkSelector = function (selector) {
        var element = document.querySelector(selector);
        if (element) {
            return this.checkElement(element);
        }
        return null;
    }

    flexslider.prototype.element = null;
    flexslider.prototype.index = 1;
    flexslider.prototype.total = 0;
    flexslider.prototype.mousestatus = 0;
    flexslider.prototype.config = {
        interval: 5000,
        autostart: true,
        animation: true,
        tools: false,
        model: 'slider'
    }
    flexslider.prototype.zoom = null;
    flexslider.prototype.bindElement = function (element) {
        this.element = element;
        this.load_config();
        this.flexslider_slides = this.element.querySelector('.flexslider_slides');

        this.total = this.flexslider_slides.querySelectorAll('li').length;


        this.element.addEventListener('click', (e) => {
            e.stopPropagation();
            var target = e.target;
            // console.log(target)

            switch (target.dataset.id) {
                case 'flex-nav-next':
                    if (this.index >= this.total) {
                        this.index = 1;
                    } else {
                        this.index++;
                    }
                    this.moveSlider();
                    break;
                case 'flex-nav-prev':
                    if (this.index <= 1) {
                        this.index = this.total;
                    } else {
                        this.index--;
                    }
                    this.moveSlider();
                    break;
                case 'flex-control-item':
                    var index = (target.innerText || target.dataset.value) * 1;
                    if (index != this.index) {
                        this.index = index;
                        this.moveSlider();
                    }
                    break;
                case 'flex-href':
                case 'flex-gallery':
                case 'zoom':
                    if (this.config.model == 'gallery') {
                        e.preventDefault();

                        var list = [];
                        var nodes = this.element.querySelectorAll('.flexslider_slides img');
                        nodes.forEach(img => {
                            var d = {}
                            d.large_image = img.dataset.large_image;
                            d.large_image_width = img.dataset.large_image_width;
                            d.large_image_height = img.dataset.large_image_height;
                            d.thumbnail_image = img.dataset.thumbnail_image;
                            d.thumbnail_image_width = img.dataset.thumbnail_image_width;
                            d.thumbnail_image_height = img.dataset.thumbnail_image_height;
                            list.push(d);
                        })

                        if (!this.zoom) {
                            this.zoom = new module.image_zoom();
                        }

                        this.zoom.setImages(list, this.index - 1);
                    }

                    break;
            }

        })

        this.element.addEventListener('mouseenter', (e) => {
            e.stopPropagation();
            this.mousestatus = 1;
            clearTimeout(this.interval)
        })
        this.element.addEventListener('mouseleave', (e) => {
            e.stopPropagation();
            this.mousestatus = 0;
            this.loop();
        })

        if (this.config.autostart) {
            this.loop();
        }
    }

    flexslider.prototype.load_config = function () {

        try {
            var option = JSON.parse(this.element.getAttribute('options'));

            for (var x in option) {
                this.config[x] = option[x];
            }
        } catch (e) {

        }
    }

    flexslider.prototype.moveSlider = function () {
        this.flexslider_slides.style.left = '-' + ((this.index - 1) * 100) + '%';
        var controls = this.element.querySelectorAll('.flex-control-nav a,.flex-control-thumbs img');
        controls.forEach(n => {
            var value = n.innerText || n.dataset.value;
            if (value == this.index + '') {
                n.classList.add('flex-active');
            } else {
                n.classList.remove('flex-active');
            }
        })

        this.loop();
    }

    flexslider.prototype.loop = function () {
        clearTimeout(this.interval)
        if (this.mousestatus || !this.config.animation) return;
        if (this.total <= 1) return;
        this.interval = setTimeout(() => {
            if (this.index >= this.total) {
                this.index = 1;
            } else {
                this.index++;
            }
            this.moveSlider();
        }, this.config.interval);
    }

    return flexslider;
}())

module.tab = (function () {

    function tab() { }


    tab.list = [];
    tab.render = function () {
        var selector = '[module="ec-tab"]';

        var nodes = document.querySelectorAll(selector);
        nodes.forEach(n => {
            this.checkElement(n);
        })
    }
    tab.checkElement = function (element) {
        for (var i = 0; i < this.list.length; i++) {
            var n = this.list[i];
            if (n.element == element) {
                return n;
            }
        }

        var obj = new tab();
        obj.bindElement(element);
        this.list.push(obj);
        return obj;
    }
    tab.checkSelector = function (selector) {
        var element = document.querySelector(selector);
        if (element) {
            return this.checkElement(element);
        }
        return null;
    }

    tab.prototype.element = null
    tab.prototype.ul = null;
    tab.prototype.bindElement = function (element) {
        this.element = element;
        this.ul = element.querySelector('ul.tabs');

        this.ul.addEventListener('click', (e) => {
            var target = e.target;
            var id = target.dataset.id;
            if (!id) return;

            var tabs = this.element.querySelectorAll('[aria-controls]');

            tabs.forEach(tab => {
                var attr = tab.getAttribute('aria-controls');
                if (attr == id) {
                    tab.classList.add('active');
                } else {
                    tab.classList.remove('active');
                }
            })

        })
    }

    return tab;
}())

module.navigation = (function () {

    function navigation() { }

    navigation.list = [];
    navigation.render = function () {
        var selector = '[module="navigation"]';

        var nodes = document.querySelectorAll(selector);
        nodes.forEach(n => {
            this.checkElement(n);
        })
    }
    navigation.checkElement = function (element) {
        for (var i = 0; i < this.list.length; i++) {
            var n = this.list[i];
            if (n.element == element) {
                return n;
            }

        }

        var obj = new navigation();
        obj.bindElement(element);
        this.list.push(obj);
        return obj;
    }
    navigation.checkSelector = function (selector) {
        var element = document.querySelector(selector);
        if (element) {
            return this.checkElement(element);
        }
        return null;
    }

    navigation.prototype.element = null
    navigation.prototype.bindElement = function (element) {
        this.element = element;

        this.element.addEventListener('click', (event) => {
            var target = event.target;
            var id = target.dataset.id;
            if (!id) return;

            switch (id) {
                case 'item-button':
                    target.parentElement.classList.toggle('active');
                    // target.classList.toggle('active');
                    break;
                case 'item-link':
                    if ((screen.width <= 1100) && (screen.width > 934) && target.parentElement.classList.contains('has-children')) {
                        //in this screen width range , when first click don't open the link;
                        target.didclick = target.didclick === void 0 ? 1 : target.didclick + 1;
                        if (target.didclick <= 1) {
                            event.preventDefault();
                        }
                    }
                    break;
            }


        })
    }

    return navigation;
}())


module.sizechart = (function () {

    function sizechart() { }

    sizechart.list = [];
    sizechart.render = function () {
        var selector = '[module="sizechart"]';

        var nodes = document.querySelectorAll(selector);
        nodes.forEach(n => {
            this.checkElement(n);
        })
    }
    sizechart.checkSelector = function (selector) {
        var element = document.querySelector(selector);
        if (element) {
            return this.checkElement(element);
        }
        return null;
    }
    sizechart.checkElement = function (element) {
        for (var i = 0; i < this.list.length; i++) {
            var n = this.list[i];
            if (n.element == element) {
                return n;
            }
        }

        var obj = new sizechart();
        obj.bindElement(element);
        this.list.push(obj);
        return obj;
    }

    sizechart.prototype.element = null;
    sizechart.prototype.overlay = null;
    sizechart.prototype.container = null;
    sizechart.prototype.bindElement = function (element) {
        this.element = element;

        this.overlay = this.element.querySelector('.sizechart-overlay');
        this.container = this.element.querySelector('.sizechart-container')

        this.element.addEventListener('click', (event) => {
            var target = event.target;
            var id = target.dataset.id;

            switch (id) {
                case 'sizechart-botton':
                    this.overlay.classList.add('active');
                    break;
                case 'sizechart-close-button':
                    this.overlay.classList.remove('active');
                    break;
                case 'sizechart-tab-item':
                    var index = target.getAttribute('tabitem-index');
                    var nodes = this.element.querySelectorAll('[tabitem-index]');
                    nodes.forEach(n => {
                        if (n.getAttribute('tabitem-index') == index) {
                            n.classList.add('active')
                        } else {
                            n.classList.remove('active')
                        }
                    })
                    break;
            }
        })
    }

    return sizechart;

}())

module.ajax = (function () {

    function ajax() {

    }

    ajax.post = function (data) {
        return fetch('/ajax', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', },
            body: JSON.stringify(data),
        })
    }

    ajax.add_to_wishlist = function (target) {
        var product_id = target.dataset.productid;
        if (!product_id) return;

        target.classList.add('loading')
        this.post({ action: "add_to_wishlist", product_id: product_id })
            .then(response => {
                target.classList.remove('loading');
                return response.json();
            }).then(resp => {
                if (resp.html) {
                    target.parentElement.innerHTML = resp.html;
                } else if (resp.redirect) {
                    location.href = resp.redirect;
                }
            }).catch(error => {
                target.classList.remove('loading')
            })
    }

    return ajax;
}());

module.card = (function () {
    defaultFormat = /(\d{1,4})/g;

    var cards = [
        {
            type: 'maestro',
            patterns: [5018, 502, 503, 506, 56, 58, 639, 6220, 67],
            format: defaultFormat,
            length: [12, 13, 14, 15, 16, 17, 18, 19],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'forbrugsforeningen',
            patterns: [600],
            format: defaultFormat,
            length: [16],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'dankort',
            patterns: [5019],
            format: defaultFormat,
            length: [16],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'visa',
            patterns: [4],
            format: defaultFormat,
            length: [13, 16],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'mastercard',
            patterns: [51, 52, 53, 54, 55, 22, 23, 24, 25, 26, 27],
            format: defaultFormat,
            length: [16],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'amex',
            patterns: [34, 37],
            format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
            length: [15],
            cvcLength: [3, 4],
            luhn: true
        }, {
            type: 'dinersclub',
            patterns: [30, 36, 38, 39],
            format: /(\d{1,4})(\d{1,6})?(\d{1,4})?/,
            length: [14],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'discover',
            patterns: [60, 64, 65, 622],
            format: defaultFormat,
            length: [16],
            cvcLength: [3],
            luhn: true
        }, {
            type: 'unionpay',
            patterns: [62, 88],
            format: defaultFormat,
            length: [16, 17, 18, 19],
            cvcLength: [3],
            luhn: false
        }, {
            type: 'jcb',
            patterns: [35],
            format: defaultFormat,
            length: [16],
            cvcLength: [3],
            luhn: true
        }
    ];
    function card() {

    }

    card.prototype.formatCardNumber = function (e) {
        var target, card, digit, length, re, upperLength, value;
        digit = e.key

        if (!/^\d+$/.test(digit) && e.key != 'Backspace' && e.key != 'Delete') {
            e.preventDefault();
            return;
        }

        if (e.key == 'Backspace' || e.key == 'Delete') {
            digit = '';
            return
        }
        target = e.target;
        value = target.value;
        card = this.cardFromNumber(value + digit);

        // console.log(card)


        length = (value.replace(/\D/g, '') + digit).length;
        upperLength = 16;
        if (card) {
            upperLength = card.length[card.length.length - 1];
        }



        if ((target.selectionStart != null) && target.selectionStart !== value.length) {
            // e.preventDefault();
            return;
        }

        if (length >= upperLength) {
            e.preventDefault();
            return;
        }

        if (card && card.type === 'amex') {
            re = /^(\d{4}|\d{4}\s\d{6})$/;
        } else {
            re = /(?:^|\s)(\d{4})$/;
        }
        if (re.test(value)) {
            e.preventDefault();
            return setTimeout(function () {
                return target.value = (value + ' ' + digit);
            });
        } else if (re.test(value + digit)) {
            e.preventDefault();
            return setTimeout(function () {
                return target.value = (value + digit + ' ');
            });
        }
    }

    card.prototype.cardFromNumber = function (num) {
        var card, p, pattern, _i, _j, _len, _len1, _ref;
        num = (num + '').replace(/\D/g, '');
        for (_i = 0, _len = cards.length; _i < _len; _i++) {
            card = cards[_i];
            _ref = card.patterns;
            for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
                pattern = _ref[_j];
                p = pattern + '';
                if (num.substr(0, p.length) === p) {
                    return card;
                }
            }
        }
    }

    card.prototype.formatExpiry = function (e) {
        var $target, digit, val;
        digit = e.key
        if (!/^\d+$/.test(digit)) {
            return;
        }
        $target = e.target
        val = $target.value + digit;
        if (/^\d$/.test(val) && (val !== '0' && val !== '1')) {
            e.preventDefault();
            return setTimeout(() => {
                return $target.value = ("0" + val + " / ");
            });
        } else if (/^\d\d$/.test(val)) {
            e.preventDefault();
            return setTimeout(() => {
                var m1, m2;
                m1 = parseInt(val[0], 10);
                m2 = parseInt(val[1], 10);
                if (m2 > 2 && m1 !== 0) {
                    return $target.value = ("0" + m1 + " / " + m2);
                } else {
                    return $target.value = ("" + val + " / ");
                }
            });
        }
    };

    card.prototype.restrictCardNumber = function (e) {
        var $target, card, digit, value;
        $target = $(e.currentTarget);
        digit = String.fromCharCode(e.which);
        if (!/^\d+$/.test(digit)) {
            return;
        }
        if (this.hasTextSelected($target)) {
            return;
        }
        value = ($target.val() + digit).replace(/\D/g, '');
        card = cardFromNumber(value);
        if (card) {
            return value.length <= card.length[card.length.length - 1];
        } else {
            return value.length <= 16;
        }
    };

    card.prototype.restrictExpiry = function (e) {
        var $target, digit, value;
        $target = e.target
        digit = e.key
        if (!/^\d+$/.test(digit)) {
            return;
        }
        if (this.hasTextSelected($target)) {
            return;
        }
        value = $target.value + digit;
        value = value.replace(/\D/g, '');
        if (value.length > 6) {

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

    card.prototype.hasTextSelected = function ($target) {
        var _ref;
        if (($target.selectionStart != null) && $target.selectionStart !== $target.selectionEnd) {
            return true;
        }
        if ((typeof document !== "undefined" && document !== null ? (_ref = document.selection) != null ? _ref.createRange : void 0 : void 0) != null) {
            if (document.selection.createRange().text) {
                return true;
            }
        }
        return false;
    };


    var _instance = null
    card.instance = function () {
        if (!_instance) {
            _instance = new card();
        }

        return _instance
    }

    card.prototype.clickEvent = (function () {

        if ('ontouchstart' in document.documentElement === true)
            return 'input'
        else
            return 'keydown'

    })


    card.prototype.bindElment = function (selector) {
        var list = document.querySelectorAll(selector);

        var eventname = this.clickEvent();
        if (!eventname) return;
        list.forEach(element => {
            element.addEventListener(eventname, (e) => {
                var id = e.target.dataset.id;
                switch (id) {
                    case 'cc-number':
                        this.formatCardNumber(e);
                        break;
                    case 'cc-exp':
                        this.formatExpiry(e)
                        this.restrictExpiry(e);
                        break;
                }
            })
        })

    }

    return card;
}());

module.RnWKDE = (function () {


    function rn() {
        this.cookie = {}
        this.start();
    }


    rn.prototype.debug = false;
    rn.prototype.api_url = '/cs-chatme-api';

    rn.prototype.domain = location.host;



    /**Container for chat interface */
    rn.prototype.view = null;

    rn.prototype.position_wrap = null;

    /**Chat icon in the lower left corner */
    rn.prototype.icon_button = null;

    rn.prototype.icon_point = null;

    /**Login page container */
    rn.prototype.login_wrap = null;

    /**Container for chat content */
    rn.prototype.content_wrap = null;

    rn.prototype.login_type_email_btn = null;
    rn.prototype.login_type_phone_btn = null;

    rn.prototype.login_type_input = null;
    rn.prototype.login_user_input = null;

    rn.prototype.login_submit_button = null



    rn.prototype.content_body = null;
    rn.prototype.content_foot = null;
    rn.prototype.content_textarea = null;

    rn.prototype.start = function () {
        window.addEventListener('load', () => {
            if(window.cschatme_merchant === void 0) return;
            this.view = document.querySelector('.dxNMhJ');
            if(!this.view) return;
            
            this.cookie.user_type = this.getCookie('usertype');
            this.cookie.user_name = this.getCookie('username');
            this.cookie.token = this.getCookie('token')

            this.icon_button = document.querySelector('.grQRpk');
            this.icon_point = document.querySelector('.jqoUZp');
            this.position_wrap = this.view.querySelector('.gTWRpt')
            this.login_wrap = this.view.querySelector('.nLYkVb');
            this.content_wrap = this.view.querySelector('.mGaNJv');


            this.login_type_email_btn = this.login_wrap.querySelector('.eKhclR')
            this.login_type_phone_btn = this.login_wrap.querySelector('.liWUQx')
            this.login_type_input = this.login_wrap.querySelector('.dXrELE');
            this.login_user_input = this.login_wrap.querySelector('.PHEmxp');
            this.login_submit_button = this.login_wrap.querySelector('.TSiDML');
            this.login_error_message = this.login_wrap.querySelector('.bMzvTr');

            this.content_body = this.content_wrap.querySelector('.tkdeNb');
            this.content_textarea = this.content_wrap.querySelector('.fePUFF');
            this.content_foot = this.content_wrap.querySelector('.nLHLtB');
            this.message_send_button = this.content_foot.querySelector('.FzKBfF')

            this.login_wrap && this.login_wrap.remove();
            this.content_wrap && this.content_wrap.remove();


            this.view.addEventListener('click', (e) => {
                var target = e.target;
                var at = target.getAttribute('cs-action');
                this.listen(at, target);
            })

            this.icon_button.style.display = 'block';
            this.icon_button.addEventListener('click', () => {
                this.listen('display');
            })

            this.content_textarea.addEventListener('input', () => {
                this.listen('resize-textarea')
            })

            this.content_textarea.addEventListener('keyup', (e) => {
                if (e.ctrlKey && e.key === 'Enter') {
                    e.preventDefault();
                    this.send_message();
                }
            })

            if (this.cookie.user_type && this.cookie.user_name) {
                this.render_content();
            } else {
                this.render_login();
            }

            this.e_display_point(this.is_unread);
            this.http_get_unread((quantity) => {
                this.is_unread = quantity;
            });
            this.loop_get_message();
        })
    }

    /**
     * 
     * @param {string} action 
     * @param {HTMLElement|null} target 
     */
    rn.prototype.listen = function (action, target) {
        switch (action) {
            case 'close':
                this.e_display_content(false)
                break;
            case 'display':
                this.e_display_content(true);
                break;
            case 'login-toggle':
                this.e_toggle_login_button(target);
                break;
            case 'login-submit':
                this.e_login_submit();
                break;
            case 'content-submit':
                this.send_message();
                break;
            case 'resize-textarea':
                this.resize_textarea();
                break;
        }
    }

    rn.prototype.render_login = function () {
        this.position_wrap.append(this.login_wrap);
        this.login_wrap.style.display = 'flex';
        this.content_wrap.remove();
        this.focus_login_user();
    }


    rn.prototype.render_content = function () {
        this.position_wrap.append(this.content_wrap);
        this.content_wrap.style.display = 'block';
        this.login_wrap.remove();
        this.content_scroll_to(true);

        this.focus_content_textarea();
    }

    rn.prototype.is_scrolled_to_bottom = function () {
        var element = this.content_body;
        return element.scrollHeight - element.scrollTop === element.clientHeight;
    }
    rn.prototype.content_scroll_to = function (force, animation) {
        animation = animation === void 0 ? true : animation;
        force = force === void 0 ? true : force;
        if (!force && !this.is_scrolled_to_bottom()) return;
        var top = this.content_body.scrollHeight;
        if (animation) {
            this.content_body.scrollTo({ top: top, behavior: "smooth" })
        } else {
            this.content_body.scrollTo({ top: top })
        }

    }

    rn.prototype.resize_textarea = function () {
        if (!this.content_textarea) return;
        var length = this.content_textarea.value.split('\n').length;
        if (length == 0) { length = 1 }
        if (length > 3) length = 3;
        this.content_body.style.bottom = this.content_foot.style.height = (length * 30 + 28) + 'px';
    }

    rn.prototype.setCookie = function (cname, cvalue) {
        cname = "customer-style-chatme-" + cname;

        window.localStorage.setItem(cname, cvalue);
    }
    rn.prototype.getCookie = function (cname) {
        cname = "customer-style-chatme-" + cname;
        return window.localStorage.getItem(cname) || '';
    }
    /**
     * When param display is true
     * content wrap will display And icon button hidden
     * else
     * display icon And hidden content
     * @param {boolean} display 
     */
    rn.prototype.e_display_content = function (display) {
        if (display) {
            //content wrap will display And icon button hidden
            this.view.style.display = 'block';
            this.icon_button.style.display = 'none';
            if ((typeof this.message_list === 'object' && Object.keys(this.message_list).length === 0)) {
                this.http_get_message(false, null);
            } else {
                this.is_unread = 0;
                this.http_get_unread((quantity) => {
                    if (quantity > 0) {
                        this.http_get_message(false, 1);
                    }
                })

            }
        } else {
            //display icon And hidden content
            this.view.style.display = 'none';
            this.icon_button.style.display = 'block';
        }
    }

    /**
     * display and hidden unread button 
     * 
     * @param {boolean} display 
     */
    rn.prototype.e_display_point = function (display) {
        this.icon_point.style.display = display ? 'block' : 'none';
    }

    Object.defineProperty(rn.prototype, 'is_unread', {
        get: function () {
            return this.getCookie('unread');
        },
        set: function (value) {
            value = value == '0' ? '' : value;
            this.setCookie('unread', value)
            this.e_display_point(value)
        }
    })

    Object.defineProperty(rn.prototype, 'is_login', {
        get: function () {
            return this.cookie.user_type && this.cookie.user_name;
        }
    })

    Object.defineProperty(rn.prototype, 'login_type', {
        get: function () {
            return this.cookie.user_type;
        }
    })
    Object.defineProperty(rn.prototype, 'merchant_id', {
        get: function () {
            return window.cschatme_merchant;
        }
    })
    /**
     * Set active a button whose login type button is the target element
     * @param {HTMLElement} target 
     */
    rn.prototype.e_toggle_login_button = function (target) {

        if (target == this.login_type_email_btn) {
            this.login_type_email_btn.classList.add('guyhHD');
            this.login_type_phone_btn.classList.remove('guyhHD');
            this.login_type_input.value = '1';
            this.login_user_input.placeholder = 'example@example.com';
        } else {
            this.login_type_phone_btn.classList.add('guyhHD');
            this.login_type_email_btn.classList.remove('guyhHD');
            this.login_type_input.value = '2';
            this.login_user_input.placeholder = '123456789';
        }
    }
    /**
     * where user enter the email or phone 
     * save to cookie and display chat content
     * there may have a http request
     * @returns 
     */
    rn.prototype.e_login_submit = function () {
        if (this.login_user_input.value.trim() == '') {
            // this.login_error_message.innerHTML = 'Please enter the user';
            return;
        }
        this.http_login_request();
    }
    //--------------------------------------------------
    //  http request 
    //--------------------------------------------------

    rn.prototype.http_login_request = function () {
        var login_type = this.login_type_input.value;


        fetch(this.api_url, {
            method: 'POST',
            body: {
                'action': 'login',
                "login_type": login_type,
                "Email": login_type == '1' ? this.login_user_input.value : '',
                "Phone": login_type == '2' ? this.login_user_input.value : '',
                "Domain": this.domain,
                "merchant_id": this.merchant_id,
                "browser_fingerprint": ""
            },
        }).then(respons => { return respons.json(); })
            .then(data => {
                if (data.code == 0) {
                    this.setCookie('token', data.data.token)
                    this.setCookie('usertype', login_type);
                    this.setCookie('username', this.login_user_input.value);
                    this.cookie.user_type = this.login_type_input.value;
                    this.cookie.user_name = this.login_user_input.value;
                    this.cookie.token = data.data.token;
                    this.render_content();

                    this.http_get_message(true, null);
                } else {
                    // this.login_error_message.innerHTML = data.
                }

            }).catch(() => {
            })





    }

    rn.prototype.http_get_unread = function (callback) {
        if (!this.is_login) return this.log('http_get_unread', "not login");
        if (this.is_unread) return this.log('http_get_unread', "has unread message");

        fetch(this.api_url, {
            method: 'POST',
            body: {
                "action": "message-quantity",
                "token": this.cookie.token
            },
        }).then(respons => { return respons.json(); })
            .then(data => {
                this.log('http_get_unread', data)
                if (data.code == 0) {
                    callback(data.data.quantity)
                }
            })

    }

    rn.prototype.message_list = {};
    rn.prototype.http_get_message = function (force, only_unread, page_size) {
        if (!this.is_login) return this.log('http_get_message', "not login");

        only_unread = only_unread === void 0 ? 1 : only_unread;
        page_size = page_size === void 0 ? 100 : page_size

        this.log('http_get_message', [force, only_unread, page_size]);

        var animation = !(typeof this.message_list === 'object' && Object.keys(this.message_list).length === 0)

        fetch(this.api_url, {
            method: 'POST',
            body: {
                "action": "message-list",
                "page": 1,
                "page_size": page_size,
                "only_unread": only_unread,
                "token": this.cookie.token
            },
        }).then(respons => { return respons.json(); })
            .then(data => {
                if (data.code == 0 && data.data.item) {
                    this.is_unread = 0;
                    var newmessage = false
                    data.data.item.forEach(m => {
                        if (!newmessage) {
                            newmessage = this.message_list[m.id] === void 0;
                        }
                        this.message_list[m.id] = m;
                    })
                    this.log('is_new_message', newmessage);
                    this.render_message(newmessage || force, animation);
                }
            })



    }

    rn.prototype.render_message = function (force, animation) {
        this.content_body.innerHTML = '';

        for (var x in this.message_list) {
            message = this.message_list[x];
            var date = new Date(message.create_at);


            var element = document.createElement('div');
            element.classList.add('xTXpje', message.sender_type == 1 ? 'xTXRIG' : 'xTXLFT');
            element.innerHTML = "<span class='bJkTNJ'>" +
                message.content + "<div class='vIhDTo'>" + this.format_time(date) + "</div></span>";
            this.content_body.append(element);
        }

        this.content_scroll_to(force, animation);
    }

    rn.prototype.http_send_message = function (message, callback) {

        if (!this.is_login) return this.log('http_send_message', "not login");
        fetch(this.api_url, {
            method: 'POST',
            body: {
                "action": "send-message",
                "content": message,
                "MsgType": 1,
                'referer_url': location.href,
                "token": this.cookie.token
            },
        }).then(respons => { return respons.json(); })
            .then(data => {
                this.log('http_send_message', data);
                if (data.code == 0) {
                    this.message_list[data.data.id] = data.data;
                    callback()
                }
            })

    }

    rn.prototype.send_message = function () {

        var value = this.content_textarea.value.trim();
        if (value.length == 0) return this.log('send_message', "nothing input");
        this.message_send_button.disabled = true;

        var date = new Date();


        var element = document.createElement('div');
        element.classList.add('xTXpje', 'xTXRIG', 'jhfKft')
        element.innerHTML = "<span class='bJkTNJ'>" +
            value + "<div class='vIhDTo'>" + this.format_time(date) + "</div></span>";
        this.content_body.append(element);

        this.content_textarea.value = '';
        this.resize_textarea();
        this.content_scroll_to(true);

        this.focus_content_textarea();

        this.http_send_message(value, (resp) => {

            setTimeout(() => {
                this.message_send_button.disabled = false;
                element.classList.remove('jhfKft');
                this.loop_times_multiple = 1;
            }, 2000);
        })
    }

    rn.prototype.focus_content_textarea = function () {
        this.content_textarea.focus();
        this.content_textarea.select();
    }

    rn.prototype.focus_login_user = function () {
        this.login_user_input.focus();
        this.login_user_input.focus();
    }


    rn.prototype.loop_current_times = 1;
    rn.prototype.loop_times_multiple = 1;
    rn.prototype.message_duration = 10;
    rn.prototype.loop_get_message = function () {
        var interval = setInterval(() => {
            if (!this.is_login) return;

            this.loop_current_times++;

            if (this.view.style.display !== 'block') {
                var remainder = this.loop_current_times % (this.message_duration * this.loop_times_multiple);
                if (remainder != 0) {
                    return
                }
                this.log('loop_get_message not display, it is time', [this.loop_current_times, this.loop_times_multiple, this.message_duration, remainder])
                this.http_get_unread((quantity) => {
                    if (quantity == 0) {
                        if (this.loop_times_multiple < 12) {
                            this.loop_times_multiple++;
                        }
                    } else {
                        this.loop_times_multiple = 1;
                    }
                    this.is_unread = quantity;
                });

                return
            }
            var remainder = this.loop_current_times % this.message_duration;
            if (remainder != 0) {
                return;
            }

            this.log('loop_get_message display, it is time', [this.loop_current_times, this.loop_times_multiple, this.message_duration, remainder])
            this.http_get_unread((quantity) => {
                if (quantity > 0) {
                    this.loop_times_multiple = 1;
                    this.http_get_message(false, 1);
                }
            })


        }, 1000);
    }

    rn.prototype.log = function (pre, value) {
        if (this.debug) {
            console.log(pre, value)
        }

    }

    rn.prototype.format_time = function (date) {
        var cdate = new Date();
        var cY = cdate.getFullYear(), cM = cdate.getMonth(), cD = cdate.getDate(), cH = cdate.getHours(), cm = cdate.getMinutes();
        var Y = date.getFullYear(), M = date.getMonth(), D = date.getDate(), H = date.getHours(), m = date.getMinutes();
        var str = '';
        if (Y > cY) {
            str = Y + '-';
        }
        if (M > cM || D > cD) {
            str += (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ';
        }
        str += (H < 10 ? "0" + H : H) + ":" + (m < 10 ? '0' + m : m);
        return str
    }

    return rn;
}());

module.cspt = (function () {
    function cspt() { }
    cspt.selector = '.auto-ajust-text';
    cspt.offset = 0; cspt.height = 0;
    cspt.index = function () {
        if (screen.width < 500) return; cspt.height = 0;
        var ele_list = document.querySelectorAll(cspt.selector);
        if (ele_list) {
            ele_list.forEach(n => {
                n.style.height = 'unset'; n.style.minHeight = 'unset';
                var h = n.clientHeight;
                if (h > cspt.height) cspt.height = h;
            })
            ele_list.forEach(n => { n.style.height = (cspt.offset + cspt.height) + 'px' })
        }
    }
    cspt.render = function (offset, selector) {
        cspt.offset = offset === void 0 || isNaN(parseFloat(offset)) ? 0 : parseFloat(offset);
        selector && (cspt.selector = selector);
        window.addEventListener('load', function () { cspt.index() });
        window.addEventListener('resize', function () { cspt.index(); });
        setTimeout(() => { cspt.index(); }, 500);
    }
    return cspt;
}())


new module.RnWKDE();