jQuery(document).ready(function( $ ) {
    $('form #submit').on('keypress', function(e) {
        return e.which !== 13;
    });

    // Control Settings Tabs
    $('#gstablink').click(function(){
        if ( !$('#gstab').hasClass('awb-tab-active') ) {
            $('#gstab').addClass('awb-tab-active');
            $('#gstablink').addClass('nav-tab-active');
            $('#bdtablink').removeClass('nav-tab-active');
            $('#bdtab').removeClass('awb-tab-active');
        }
    });
    $('#bdtablink').click(function(){
        if ( !$('#bdtab').hasClass('awb-tab-active') ) {
            $('#bdtab').addClass('awb-tab-active');
            $('#bdtablink').addClass('nav-tab-active');
            $('#gstablink').removeClass('nav-tab-active');
            $('#gstab').removeClass('awb-tab-active');
        }
    });
});



jQuery(document).ready(function( $ ) {
    // Add Color Picker to all inputs that have 'color-field' class
    $( '.udi-bg-color-picker' ).wpColorPicker({
        /**
         * @param {Event} event - standard jQuery event, produced by whichever
         * control was changed.
         * @param {Object} ui - standard jQuery UI object, with a color member
         * containing a Color.js object.
         */

        // Listen to a change in the color picker in order to update the button background in the preview screen with the picked color
        change: function (event, ui) {
            var element = event.target;
            var color = ui.color.toString();
    
            $('#whatsAppButton').css('background-color', color);
        },
    
        /**
         * @param {Event} event - standard jQuery event, produced by "Clear"
         * button.
         */

        // Listen in case the color picker is cleared, in order to update the button preview screen with the default color.
        clear: function (event) {
            var element = jQuery(event.target).siblings('.wp-color-picker')[0];
            var color = '';
    
            if (element) {
                $('#whatsAppButton').css('background-color', '#20B038');
            }
        }
    });
    
    // Change text color in preview according to input
    $('.udi-text-color-picker').wpColorPicker({

        change: function (event, ui) {
            var element = event.target;
            var color = ui.color.toString();
    
            $('#whatsAppButton').css('color', color);
        },
    
        clear: function (event) {
            var element = jQuery(event.target).siblings('.wp-color-picker')[0];
            var color = '';
    
            if (element) {
                $('#whatsAppButton').css('color', '#ffffff');
            }
        }
    });
});

/*
*
* Change Button Preview look on settings page according to values from all settings inputs
*
*/

// Get Button container ID
var wabcont = document.getElementById('admin_wab_cont');
var wabButtonText = document.getElementById('wab-text');

// Change button type (side rectangle, bottom rectangle, icon) according to select value
var awbButtonTypeSelect = document.getElementById('awb_settings[button_type]');
awbButtonTypeSelect.addEventListener('change',  function() {
    wabcont.classList.remove('wab-side-rectangle', 'wab-bottom-rectangle', 'wab-icon-styled', 'wab-icon-plain');
    wabcont.classList.add(awbButtonTypeSelect.value);
    
    if (awbButtonTypeSelect.value === 'wab-icon-plain') {
        wabButtonText.classList.add('awb-displaynone');
    } 
    else if (wabButtonText.classList.contains('awb-displaynone')) {
        wabButtonText.classList.remove('awb-displaynone');
    }
});

// Change button text in real time according to input value
var awbButtonTextInput, whatsAppButton;
awbButtonTextInput = document.getElementById('awb_settings[button_text]');
whatsAppButton = document.getElementById('whatsAppButton');

awbButtonTextInput.onkeyup = function () {
    whatsAppButton.innerHTML = awbButtonTextInput.value;
};

// Display breakpoint width input box if breakpoint checkbox is checked
var awbBreakpointCheckbox = document.getElementById('awb_settings[enable_breakpoint]');
var awbBreakpointContainer = document.getElementById('awb_breakpoint');

if (awbBreakpointCheckbox.checked == true) awbBreakpointContainer.classList.remove('bp-no-show');

awbBreakpointCheckbox.addEventListener('change',  function() {
    awbBreakpointContainer.classList.toggle('bp-no-show');
});

// Display 'Hide Button' radio buttons if 'Hide Button' checkbox is checked
var awbHideButtonCheckbox = document.getElementById('awb_settings[enable_hide_button]');
var awbHideButtonContainer = document.getElementById('awb_hide_button');

if (awbHideButtonCheckbox.checked == true) awbHideButtonContainer.classList.remove('hb-no-show');

awbHideButtonCheckbox.addEventListener('change',  function() {
    awbHideButtonContainer.classList.toggle('hb-no-show');
});

// Display 'Display Times' input boxes if the "Limit Display Time" checkbox is checked
var awbLimitHoursCheckbox = document.getElementById('awb_settings[limit_hours]');
var awbLimitHoursContainer = document.getElementById('awb_limit_hours');

if (awbLimitHoursCheckbox.checked == true) awbLimitHoursContainer.classList.remove('lh-no-show');

awbLimitHoursCheckbox.addEventListener('change',  function() {
    awbLimitHoursContainer.classList.toggle('lh-no-show');
});

// Display Default Message Textarea if the "Default Message" checkbox is checked
var awbDefaultMessageCheckbox = document.getElementById('awb_settings[enable_message]');
var awbDefaultMessageContainer = document.getElementById('awb_enable_message');

if (awbDefaultMessageCheckbox.checked == true) awbDefaultMessageContainer.classList.remove('em-no-show');

awbDefaultMessageCheckbox.addEventListener('change',  function() {
    awbDefaultMessageContainer.classList.toggle('em-no-show');
});

// Change button background color
var awbButtonBG = document.getElementById('awb_settings[button_bg_color]');
jQuery(document).ready(function( $ ) {
    $('.wp-admin #whatsAppButton').css('background', awbButtonBG.value);

    awbButtonBG.addEventListener('change',  function() {
        $('.wp-admin #whatsAppButton').css('background', awbButtonBG.value);
    });
});

// Change button text color
var awbButtonTextColor = document.getElementById('awb_settings[button_text_color]');
jQuery(document).ready(function( $ ) {
    $('.wp-admin #whatsAppButton').css('color', awbButtonTextColor.value);

    awbButtonTextColor.addEventListener('change',  function() {
        if (awbButtonTextColor.value == '') {
            $('.wp-admin #whatsAppButton').css('color', '#ffffff');
        }
        else {
            $('.wp-admin #whatsAppButton').css('color', awbButtonTextColor.value);
        }
    });
});

// Control the button location on the preview mockup 
var awbButtonLocationSelect = document.getElementById('awb_settings[button_location]');

awbButtonLocationSelect.addEventListener('change',  function() {
    if (awbButtonLocationSelect.value == 'right') {
        document.getElementById('admin_wab_cont').classList.add('wab-pull-right');
    } 
    else if (awbButtonLocationSelect.value == 'left') {
        document.getElementById('admin_wab_cont').classList.add('wab-pull-left');
    }
});

// Change button location on the preview mockup (left/right) when the respective select input changes
awbButtonLocationSelect.addEventListener('change',  function() {
    
    if (awbButtonLocationSelect.value == 'right') {
        if ( ! wabcont.classList.contains('wab-pull-right') ) {
            wabcont.classList.add('wab-pull-right');
        }
        
        if ( wabcont.classList.contains('wab-pull-left') ) {
            wabcont.classList.remove('wab-pull-left');
        }
    }
    
    if (awbButtonLocationSelect.value == 'left') {
        if ( !wabcont.classList.contains('wab-pull-left') ) {
            wabcont.classList.add('wab-pull-left');
        }
        
        if ( wabcont.classList.contains('wab-pull-right') ) {
            wabcont.classList.remove('wab-pull-right');
        }
    }
});

// Change button's distance from bottom (and whether it is determined by % or px)
var awbDistanceBottom = document.getElementById('awb_settings[distance_from_bottom]');
var awbDistanceBottomMU = document.getElementById('awb_settings[distance_from_bottom_mu]');

jQuery(document).ready(function( $ ) {

    awbDistanceBottom.addEventListener('change',  function() {
        //console.log('test distance');
        $('.wp-admin .wab-cont').css('bottom', awbDistanceBottom.value + awbDistanceBottomMU.value);
    });

    awbDistanceBottomMU.addEventListener('change',  function() {
        //console.log('test measurement unit');
        $('.wp-admin .wab-cont').css('bottom', awbDistanceBottom.value + awbDistanceBottomMU.value);
    });
});

var offset = new Date().getTimezoneOffset();
//console.log(offset/60);