BX.ready(function () {

    BX.namespace("PopupproAdminCrm");

    BX.PopupproAdminCrm = function (params) {
        this.params = params
        this.init();
    };

    BX.PopupproAdminCrm.prototype = {

        init: function () {
            this.c_container = BX("crm_table");
            this._events();
        },

        _showPass: function (el) {
            el.parentNode.replaceChild(BX.create('INPUT', {
                props: {
                    type: el.type == 'text' ? 'password' : 'text',
                    name: el.name,
                    value: el.value
                }
            }), el);
        },

        CRMupdate: function (id) {
            this.CRM({
                ID: id,
                NAME: document.querySelectorAll("tr[data-id='" + id + "']")[0].getAttribute("data-name"),
                URL: document.querySelectorAll("tr[data-id='" + id + "']")[0].getAttribute("data-url"),
            })
        },

        CRM: function (data) {

            let ManagerCrm = this;
            var popup_id = Math.random();

            this.popupId = popup_id;

            data = data || {ID: 'new_' + popup_id}

            if (data && data.URL) {
                var r = /^(http|https):\/\/([^\/]+)(.*)$/i,
                    res = r.exec(data.URL);
                if (!res) {
                    var proto = data.URL.match(/\.bitrix24\./) ? 'https' : 'http';

                    data.URL = proto + '://' + data.URL;
                    res = r.exec(data.URL);
                }

                if (res) {
                    data.URL_SERVER = res[1] + '://' + res[2];
                    data.URL_PATH = res[3];
                }
            }

            if (!data.AUTH_HASH) {
                var content = `
                <div class="form-crm-settings">
                    <form name="form_${popup_id}">
                        <table cellpadding="0" cellspacing="2" border="0">
                            <tr>
                                <td align="right">${BX.message("FORM_TAB_CRM_ROW_TITLE")}:</td>
                                <td>
                                    <input type="text" name="NAME" value="${BX.util.htmlspecialchars(data.NAME || '')}">
                                </td>
                            </tr>
                            <tr>
                                <td align="right">${BX.message("FORM_TAB_CRM_FORM_URL_SERVER")}:</td>
                                <td>
                                    <input type="text" name="URL_SERVER" value="${BX.util.htmlspecialchars(data.URL_SERVER || '')}">
                                </td>
                            </tr>
                            <tr>
                                <td align="right">${BX.message("FORM_TAB_CRM_FORM_URL_PATH")}:</td>
                                <td><input type="text" name="URL_PATH" value="${BX.util.htmlspecialchars(data.URL_PATH || this.params.defaultPath)}"></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center"><b>${BX.message("FORM_TAB_CRM_ROW_AUTH")}</b></td>
                            </tr>
                            <tr>
                                <td align="right">${BX.message("FORM_TAB_CRM_ROW_AUTH_LOGIN")}:</td>
                                <td><input type="text" name="LOGIN" value="${BX.util.htmlspecialchars(data.LOGIN || '')}"></td>
                            </tr>
                            <tr>
                                <td align="right">${BX.message("FORM_TAB_CRM_ROW_AUTH_PASSWORD")}:</td>
                                <td><input type="password" name="PASSWORD" value="${BX.util.htmlspecialchars(data.PASSWORD || '')}"></td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="javascript:void(0)" class="crm-form-show-pass">${BX.message("FORM_TAB_CRM_ROW_AUTH_PASSWORD_SHOW")}</a>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>`;
            } else {
                var content = `
                    <div class="form-crm-settings form-crm-settings-hide-auth" id="popup_cont_' + this.popupId + '">
                        <form name="form_' + popup_id + '">
                            <table cellpadding="0" cellspacing="2" border="0">
                                <tr>
                                    <td align="right">${BX.message("FORM_TAB_CRM_ROW_TITLE")}:</td>
                                    <td>
                                        <input type="text" name="NAME" value="${BX.util.htmlspecialchars(data.NAME || '')}">
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">${BX.message("FORM_TAB_CRM_FORM_URL_SERVER")}:</td>
                                    <td>
                                        <input type="text" name="URL_SERVER" value="${BX.util.htmlspecialchars(data.URL_SERVER || '')}">
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">${BX.message("FORM_TAB_CRM_FORM_URL_PATH")}:</td>
                                    <td>
                                        <input type="text" name="URL_PATH" value="${BX.util.htmlspecialchars(data.URL_PATH || this.params.defaultPath)}">
                                    </td>
                                </tr>
                                <tr class="form-crm-auth">
                                    <td colspan="2" align="center"><b>${BX.message("FORM_TAB_CRM_ROW_AUTH")}</b>
                                    </td>
                                </tr>
                                <tr class="form-crm-auth">
                                    <td align="right">${BX.message("FORM_TAB_CRM_ROW_AUTH_LOGIN")}:</td>
                                    <td><input type="text" name="LOGIN" value="${BX.util.htmlspecialchars(data.LOGIN || '')}"></td>
                                </tr>
                                <tr class="form-crm-auth">
                                    <td align="right">${BX.message("FORM_TAB_CRM_ROW_AUTH_PASSWORD")}:</td>
                                    <td><input type="password" name="PASSWORD" value="${BX.util.htmlspecialchars(data.PASSWORD || '')}"></td>
                                </tr>
                                <tr>
                                    <td align="right"></td>
                                    <td>
                                        <a href="javascript:void(0)" class="form-crm-auth crm-form-show-pass">${BX.message("FORM_TAB_CRM_ROW_AUTH_PASSWORD_SHOW")}</a>
                                      
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>`;
            }

            var wnd = new BX.PopupWindow('popup_' + this.popupId, window, {
                titleBar: {content: BX.create('SPAN', {text: !isNaN(parseInt(data.ID)) ? BX.message("FORM_CRM_TITLEBAR_EDIT") : BX.message("FORM_CRM_TITLEBAR_NEW")})},
                draggable: true,
                autoHide: false,
                closeIcon: true,
                closeByEsc: true,
                content: content,
                buttons: [
                    new BX.PopupWindowButton({
                        text: BX.message('JS_CORE_WINDOW_SAVE'),
                        className: "popup-window-button-accept",
                        events: {
                            click: function () {
                                ManagerCrm.CRMSave(wnd, data, document.forms['form_' + ManagerCrm.popupId])
                            }
                        }
                    }),
                    new BX.PopupWindowButtonLink({
                        text: BX.message('JS_CORE_WINDOW_CANCEL'),
                        className: "popup-window-button-link-cancel",
                        events: {
                            click: function () {
                                wnd.close()
                            }
                        }
                    })
                ]
            });

            wnd.show();
        },

        CRMRedraw: function (data) {
            var table = BX('crm_table').tBodies[0];
            var tr = table.insertRow(-1);

            tr.id = 'crm_row_' + data.ID;
            tr.setAttribute("data-id", data.ID);
            tr.setAttribute("align", "center");

            tr.insertCell(-1).appendChild(document.createTextNode(data.NAME || BX.message("FORM_TAB_CRM_UNTITLED")));
            tr.insertCell(-1).appendChild(document.createTextNode(data.URL));

            var authCell = tr.insertCell(-1);
            authCell.id = 'crm_auth_cell_' + data.ID;

            this.CRMCheck(data.ID, data.URL);

            BX.adjust(tr.insertCell(-1), {
                children: [
                    BX.create('A', {
                        props: {
                            className: 'form-action-button action-edit',
                            title: BX.message("FORM_TAB_CRM_EDIT")
                        },

                        attrs: {href: 'javascript: void(0)', "data-server-id": data.ID},
                        events: {
                            click: BX.delegate(e => this.CRM(this), data)
                        }
                    }),
                    BX.create('A', {
                        props: {
                            BXCRMID: data.ID,
                            className: 'form-action-button action-delete',
                            title: BX.message("FORM_TAB_CRM_DELETE")
                        },
                        attrs: {href: 'javascript: void(0)', "data-server-id": data.ID},
                        events: {
                            click: function (e) {
                                this.CRMDelete(this.BXCRMID);
                            }
                        }
                    })
                ]
            });
        },

        CRMSave: function (wnd, data_old, form) {
            var URL = form.URL_SERVER.value;
            if (URL.substring(URL.length - 1, 1) != '/' && form.URL_PATH.value.substring(0, 1) != '/')
                URL += '/';
            URL += form.URL_PATH.value;

            var flds = ['ID', 'NAME', 'URL', 'ACTIVE', 'LOGIN', 'PASSWORD'],
                data = {
                    ID: data_old.ID,
                    NAME: form.NAME.value,
                    URL: URL,
                    ACTIVE: 'Y', //form.ACTIVE.checked ? 'Y' : 'N',
                    LOGIN: !!form.LOGIN ? form.LOGIN.value : '',
                    PASSWORD: !!form.PASSWORD ? form.PASSWORD.value : ''
                };


            var res = false, r = /^(http|https):\/\/([^\/]+)(.*)$/i;
            if (data.URL) {
                res = r.test(data.URL);
                if (!res) {
                    var proto = data.URL.match(/\.bitrix24\./) ? 'https' : 'http';
                    data.URL = proto + '://' + data.URL;
                    res = r.test(data.URL);
                }
            }

            if (!res) {
                alert(BX.message('FORM_TAB_CRM_WRONG_URL'));
            } else {
                var query_str = '';

                for (var i = 0; i < flds.length; i++) {
                    query_str += (query_str == '' ? '' : '&') + 'CRM[' + data.ID + '][' + flds[i] + ']=' + BX.util.urlencode(data[flds[i]]);
                }

                BX.ajax({
                    method: 'POST',
                    dataType: 'json',
                    url: this.params.url,
                    data: query_str,
                    onsuccess: data => {
                        if (data.OLD_ID) {
                            document.querySelectorAll("tr[data-id='" + data.OLD_ID + "']")[0].remove();
                        }

                        if (data.result == "201") {
                            this.CRMRedraw(data);
                        } else {
                            alert(data.error);
                        }
                    }
                });

                if (!!wnd)
                    wnd.close();
            }
        },

        CRMDelete: function (ID) {
            if (confirm(BX.message("FORM_TAB_CRM_CONFIRM"))) {
                var data = {
                    CRM: {
                        ID: {
                            DELETED: "Y",
                            ID: ID
                        }
                    }
                }
                BX.ajax({
                    method: 'POST',
                    dataType: 'json',
                    url: this.params.url,
                    data: data,
                    onsuccess: function (data) {
                        document.querySelectorAll("tr[data-id='" + data.ID + "']")[0].remove();
                    }
                });
                return false;
            }
        },

        CRMCheck: function (ID, URL) {
            var c = BX('crm_auth_cell_' + ID);
            if (c) {
                c.innerHTML = BX.message("FORM_TAB_CRM_CHECK_LOADING");
            }
            var data = {
                CRM: {
                    ID: {
                        CHECK: "Y",
                        URL: URL,
                        ID: ID
                    }
                }
            }
            BX.ajax({
                method: 'POST',
                dataType: 'json',
                url: this.params.url,
                data: data,
                onsuccess: function (res) {
                    if (!!res) {
                        if (res.result == 'ok') {
                            BX('crm_auth_cell_' + ID).innerHTML = 'OK';
                        } else {
                            BX('crm_auth_cell_' + ID).innerHTML = BX.message("FORM_TAB_CRM_CHECK_ERROR").replace('#ERROR#', res.error || '');
                        }
                    }
                }
            });
            return false;
        },

        _events: function () {

            BX.bindDelegate(this.c_container, "click", {className: "crm-add"}, e => this.CRM());
            BX.bindDelegate(this.c_container, "click", {className: "action-delete"}, e => this.CRMDelete(e.target.dataset.serverId));
            BX.bindDelegate(this.c_container, "click", {className: "action-edit"}, e => this.CRMupdate(e.target.dataset.serverId));
            BX.bindDelegate(this.c_container, "click", {className: "crm-form-check"}, e => this.CRMCheck(
                e.target.dataset.serverId,
                e.target.dataset.serverUrl
            ));

            BX.bindDelegate(BX(document),
                "click",
                {className: "crm-form-show-pass"},
                e => this._showPass(document.forms["form_" + this.popupId].PASSWORD)
            );




        }
    };

});