const $sodon= {
    get: function(url, formId, callback) {
        const headers = new Headers();
        let params = ``;
        if (formId && typeof formId === 'string' && typeof formId !== 'function') {
            const formEl = document.getElementById(formId);
            if (formEl === null) {
                console.log('Алдаа гарлаа: form element олдсонгүй!');
                return;
            }
            params = new URLSearchParams(new FormData(formEl)).toString();
            params = `?` + params;
        }

        fetch(url + params, {
            method: 'GET',
            headers: headers
        })
            .then(response => response.text())
            .then((response) => {
                if (formId !== undefined && formId !== null && typeof formId === 'function') {
                    formId(response);
                } else if (callback !== undefined && callback !== null && typeof callback === 'function') {
                    callback(response);
                }
            })
            .catch(error => console.error('Алдаа гарлаа: ' + error.message));
    },
    getJson: function(url, formId, callback) {
        const headers = new Headers();
        headers.append('Accept', 'application/json');
        let params = ``;
        if (formId !== undefined && formId !== null && typeof formId === 'string' && typeof formId !== 'function') {
            const formEl = document.getElementById(formId);
            if (formEl === null) {
                console.log('Алдаа гарлаа: form element олдсонгүй!');
                return;
            }
            params = new URLSearchParams(new FormData(formEl)).toString();
            params = `?` + params;
        }

        fetch(url + params, {
            method: 'GET',
            headers: headers
        })
            .then(response => response.json())
            .then((response) => {
                if (formId !== undefined && formId !== null && typeof formId === 'function') {
                    formId(response);
                } else if (callback !== undefined && callback !== null && typeof callback === 'function') {
                    callback(response);
                }
            })
            .catch((error) => {
                console.error('Алдаа гарлаа: ', error.message);
                console.error('url: ', (url + params));
            });
    },
    getJson2: function(url, data, callback) {
        const headers = new Headers();
        headers.append('Accept', 'application/json');
        fetch(url, {
            method: 'GET',
            headers: headers,
            body: JSON.stringify(data)
        })
            .then(response => response.json())
            .then((response) => {
                if (callback !== undefined && callback !== null && typeof callback === 'function')
                    callback(response);
            })
            .catch((error) => {
                console.error('Алдаа гарлаа: ', error.message);
                console.error('url: ', url);
            });
    },
    post: function(url, formId, callback, callbackError) {
        const headers = new Headers();
        const config = {
            method: 'POST',
            headers: headers
        };
        if (formId && typeof formId === 'string' && typeof formId !== 'function') {
            const formEl = document.getElementById(formId);
            if (formEl === null) {
                console.log('Алдаа гарлаа: form element олдсонгүй!');
                return;
            }
            config.body = new FormData(formEl);
        }

        fetch(url, config)
            .then(response => response.text())
            .then((response) => {
                if (formId && typeof formId === 'function') {
                    formId(response);
                } else if (callback && typeof callback === 'function') {
                    callback(response);
                }
            })
            .catch(error => {
                console.error('Алдаа гарлаа: ' + error.message);
                if (callbackError && typeof callbackError === 'function')
                    callbackError(error);
            });
    },

    /**
     * form дамжуулдаг post request-д ашигладаг.
     * (url, formId, callback)
     * (url, formId)
     * (url, callback)
     */
    postJson: function(url, formId, callback, callbackError) {
        const headers = new Headers();
        headers.append('Accept', 'application/json');
        const config = {
            method: 'POST',
            headers: headers
        };
        if (formId && typeof formId === 'string' && typeof formId !== 'function') {
            const formEl = document.getElementById(formId);
            if (formEl === null) {
                console.log('Алдаа гарлаа: form element олдсонгүй!');
                return;
            }
            config.body = new FormData(formEl);
        }
        fetch(url, config)
            .then(response => response.json())
            .then((response) => {
                if (formId && typeof formId === 'function') {
                    formId(response);
                } else if (callback && typeof callback === 'function') {
                    callback(response);
                }
            })
            .catch(error => {
                console.log('Алдаа гарлаа: ' + error.message);
                if (callbackError && typeof callbackError === 'function')
                    callbackError(error);
            });
    },
    postJson2: function(url, data, callback, callbackError) {
        const headers = new Headers();
        headers.append('Accept', 'application/json');
        headers.append('Content-Type', 'application/json');
        fetch(url, {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(data)
        })
            .then(response => response.json())
            .then((response) => {
                if (callback !== undefined && callback !== null && typeof callback === 'function')
                    callback(response);
            })
            .catch(error => {
                console.log('Алдаа гарлаа: ' + error.message);
                if (callbackError !== undefined && callbackError !== null && typeof callbackError === 'function')
                    callbackError(error);
            });
    },
    numberFormat: function (number, decimals, dec_point, thousands_sep) {
        // http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_number_format/
        number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
        var n = !isFinite(+number) ? 0 : +number,
            prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
            sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
            dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
            s = '',
            toFixedFix = function (n, prec) {
                var k = Math.pow(10, prec);
                return '' + Math.round(n * k) / k;
            };
        // Fix for IE parseFloat(0.55).toFixed(0) = 0;
        s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
        if (s[0].length > 3) {
            s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
        }
        if ((s[1] || '').length < prec) {
            s[1] = s[1] || '';
            s[1] += new Array(prec - s[1].length + 1).join('0');
        }
        return s.join(dec);
    },
    deNumberFormat: function (value) {
        value = value.replace(/,/g, '');
        return parseInt(value);
    },
    deFloatNumberFormat: function (value) {
        value = value.replace(/,/g, '');
        return parseFloat(value);
    }
}

/**
 * Ашиглах заавар: доорх html-тэй хамт ажилладаг юм билээ.
 * layout.jsp-ийн доод хэсэгт нэг удаа хуулаад өгөхөд болно.
 * <div id="smallModal" class="sodon-modal">
 *         <div class="sodon-modal-container">
 *             <div class="sodon-modal-header">
 *                 <div class="modal-header-into"></div>
 *                 <span class="sodon-modal-close">&times;</span>
 *             </div>
 *             <div class="sodon-modal-content"></div>
 *         </div>
 * </div>
 * <div id="overlay"></div>
 * Дуудаж ашглах жишээ:
 * $sodon.modal.open("smallModal", function () {
 *                         const invoice = data;
 *                         let html = `<div class="display-flex flex-align-center flex-justify-center">
 *                                         <img src="data:image/png;base64,\${invoice.qrImage}" width="250" height="250"/>
 *                                     </div>`;
 *                         const el = document.querySelector("#smallModal .modal-content");
 *                         el.innerHTML = html;
 *                     });
 */
$sodon.modal = {
    open: function (targetId, callback, callbackClose) {
        const modalEl = document.getElementById(targetId);
        modalEl.classList.add("open");

        modalEl.querySelector("#smallModal .sodon-modal-close").addEventListener("click", function () {
            modalEl.classList.remove("open");
            if (callbackClose !== undefined && callbackClose !== null && typeof callbackClose === 'function')
                callbackClose();
        });

        const overlayEl = document.getElementById('overlay');
        overlayEl.addEventListener('click', () => {
            const modals = document.querySelectorAll('.sodon-modal');
            modals.forEach(item => {
                item.classList.remove("open");
                if (callbackClose !== undefined && callbackClose !== null && typeof callbackClose === 'function')
                    callbackClose();
            })
        });

        if (callback !== undefined && callback !== null && typeof callback === 'function')
            callback();
    }
}

/**
 * Нэг зураг upload хийхэд их хэрэг болдог.
 */
class ImageUpload {
    constructor(targetId) {
        this.targetId = targetId;
    }
    changeImage(el) {
        const _this = this;
        const imgEl = document.querySelector(`#` + _this.targetId + ` img`);
        const file = el.files[0];
        const picReader = new FileReader();
        picReader.addEventListener("load", function (event) {
            const picFile = event.target;
            imgEl.style.display = 'block';
            imgEl.setAttribute("src", picFile.result);
        });
        picReader.readAsDataURL(file);
    }
    /**
     * multipart руу хоосон файл илгээж алдаа заалгахгүй.
     * submit хийхээс өмнө дуудах ёстой.
     */
    update() {
        const _this = this;
        const fileInputs = document.querySelectorAll(`#` + _this.targetId + ` input[type="file"]`);
        for (let i = 0; i < fileInputs.length; i++) {
            if (fileInputs[i].value === '') {
                const item = fileInputs[i];
                item.removeAttribute("name");
            }
        }
    }
}

/**
 * Нэг файл upload хийхэд их хэрэг болдог.
 */
class FileUpload {
    constructor(targetId) {
        this.targetId = targetId;
    }
    /**
     * multipart руу хоосон файл илгээж алдаа заалгахгүй.
     * submit хийхээс өмнө дуудах ёстой.
     */
    update() {
        const _this = this;
        const fileInputs = document.querySelectorAll(`#` + _this.targetId + ` input[type="file"]`);
        for (let i = 0; i < fileInputs.length; i++) {
            if (fileInputs[i].value === '') {
                const item = fileInputs[i];
                item.removeAttribute("name");
            }
        }
    }
}

class $Tab {
    target = null;
    constructor(target) {
        const _this = this;
        if (target)
            this.target = target;
        document.querySelector(_this.target).querySelectorAll('.tab-button').forEach((item, index)=> {
            item.addEventListener('click', function (event) {
                _this._active(index);
            })
        });
        _this._active(0);
    }
    _active(index) {
        const _this = this;
        document.querySelector(_this.target).querySelectorAll('.tab-button').forEach((item, index2)=> {
            if (index === index2) {
                if (!item.classList.contains('active'))
                    item.classList.add('active');
            } else
                item.classList.remove('active');
        });
        document.querySelector(_this.target).querySelectorAll('.tab-item').forEach((item, index2)=> {
            if (index === index2)
                item.style.display = 'block';
            else
                item.style.display = 'none';
        });
    }
}

class Tab_interaction {
    length = 0;
    current = 0;
    element = null;
    constructor(element) {
        if (element)
            this.element = element;
        if (this.element !== null && this.element !== undefined) {
            if (document.querySelector(this.element)) {
                document.querySelector(this.element).querySelectorAll('.tab-button').forEach((el, i)=>{
                    el.setAttribute("data-index", i);
                    this.length++
                });
            } else
                console.error("Couldn't find element with matching id");
        } else {
            console.error('You must specify an element with id');
        }
    }
    click(that, callback){
        if (this.element && document.querySelector(this.element)) {
            document.querySelector(this.element).querySelectorAll('.tab-button').forEach((el, i)=>{
                el.classList.remove("active");
            });
            document.querySelector(this.element).querySelectorAll('.tab-item').forEach((el, i)=>{
                el.classList.remove("open");
                if (that.getAttribute("data-index") === i.toString())
                    el.classList.add("open");
            });
            that.classList.add("active");
            if (callback !== undefined && typeof callback === "function")
                callback();
        }
    }
}

/**
 * for suggest
 * inputId нь заавал
 * searchUrl нь заавал
 * clickCallback нь заавал
 * getLabelCallback нь заавал биш
 * <div>
 * <input id="member-filter" />
 * <script>
 *   new Suggest('user-${row.id}', '/api/lawyer?q=', (item) => {
 *      console.log('click= #', item.id);
 *   }, (item) => {
 *      console.log('label= ', item.givenname);
 *   });
 * </script>
 * </div>
 */
class Suggest {
    constructor(inputId, searchUrl, clickCallback, getLabelCallback) {
        const _this = this;
        const inputEl = document.querySelector(inputId);
        if (inputEl === null) {
            console.error("inputId is wrong!");
            return;
        }
        this.inputEl = inputEl;
        this.searchUrl = searchUrl;
        this.clickCallback = clickCallback;
        this.getLabelCallback = getLabelCallback;

        const divEl = document.createElement("div");
        divEl.classList.add("suggest-list-target");
        divEl.style.position = 'absolute';
        divEl.style.zIndex = '1000';
        divEl.style.width = inputEl.offsetWidth + 'px';
        divEl.style.backgroundColor = '#FFF';
        inputEl.after(divEl);
        this.targetEl = divEl;

        inputEl.addEventListener("input", (event) => {
            _this.targetEl.style.display = 'block';
            _this.search(event.target.value);
        })
    }
    search(value) {
        const _this = this;
        $sodon.getJson(_this.searchUrl + value, function (data) {
            const items = data;
            if (items.length > 0) {
                const ulEl = document.createElement("ul");
                ulEl.style.margin = '0';
                ulEl.style.padding = '0';
                ulEl.style.paddingLeft = '5px';
                ulEl.style.listStyle = 'none';
                items.map((item) => {
                    const liEl = document.createElement("li");
                    const aEl = document.createElement("a");
                    aEl.href = 'javascript:void(0)';
                    aEl.style.display = 'block';
                    if (_this.getLabelCallback && typeof _this.getLabelCallback === 'function')
                        aEl.innerText = _this.getLabelCallback(item);
                    else
                        aEl.innerText = item.name;
                    aEl.addEventListener("click", (event) => {
                        if (_this.clickCallback && typeof _this.clickCallback === 'function') {
                            _this.targetEl.style.display = 'none';
                            _this.clickCallback(item);
                        }
                    })
                    liEl.append(aEl);
                    ulEl.append(liEl);
                });
                _this.targetEl.innerHTML = '';
                _this.targetEl.append(ulEl);
            } else {
                _this.targetEl.innerHTML = `<div class="alert alert-warning">Үр дүн олдсонгүй!</div>`;
            }
            _this.targetEl.style.border = '1px solid #CCC';
            _this.targetEl.style.borderTop = 'none';
        })
    }
}

/* мэдээний хажуу талд зураг оруулахад зай авна*/
document.addEventListener("DOMContentLoaded", ()=> {
    document.querySelectorAll("#articleText img").forEach(item=>{
        if (item.style.float !== "" && item.style.float === "left")
            item.style.marginRight = 20+'px'
        if (item.style.float !== "" && item.style.float === "right")
            item.style.marginLeft = 20+'px'
    })
})