// Enable updates when styling the chatbox
jQuery(document).ready(function ($) {
    // Initialize color picker for color fields with change event to update preview
    $('.wp-color-picker-field').wpColorPicker({
        change: function (event, ui) {
            updateChatboxPreview(); // Call the update function on color change
        }
    });
    $('<style id="placeholder-style"></style>').appendTo('head');

    // Function to update the live preview based on current settings
    function updateChatboxPreview() {
        var userMessage = $('.tah_user-message');
        var botMessage = $('.tah_response-message');
        var chatWrapper = $('.tah_chat-wrapper');
        var inputField = $('.tah_form input[type="text"]');
        var submitButton = $('.tah_form button');
        const welcomeMessage = $('#tah_chat_welcome_message').val();
        $('.tah_response-message:first').text(welcomeMessage);

        // Apply user message background color, font family, color, and size
        userMessage.css('background-color', $('#tah_user_message_bg_color_chatbox').val());
        userMessage.css('font-family', $('#user_message_font_family').val());
        userMessage.css('color', $('#user_message_font_color').val());
        userMessage.css('font-size', $('#user_message_font_size').val());

        // Apply bot message background color, font family, color, and size
        botMessage.css('background-color', $('#tah_bot_message_bg_color_chatbox').val());
        botMessage.css('font-family', $('#bot_message_font_family').val());
        botMessage.css('color', $('#bot_message_font_color').val());
        botMessage.css('font-size', $('#bot_message_font_size').val());

        // Apply input text color and placeholder text
        inputField.css('color', $('#input_text_color').val());
        inputField.attr('placeholder', $('#input_placeholder_text').val());

        // Set the placeholder color
        var inputTextColor = $('#input_text_color').val();
        inputField.css('color', inputTextColor);
        inputField.attr('placeholder', $('#input_placeholder_text').val());
        inputField.css('font-family', $('#input_and_button_font_family').val());
        // Fix for some browsers
        var styleContent = '::placeholder { color: ' + inputTextColor + '; }';
        $('#placeholder-style').html(styleContent);

        // Apply submit button color, text color, font family, and text
        submitButton.css('background-color', $('#submit_button_color').val());
        submitButton.css('color', $('#submit_button_text_color').val());
        submitButton.css('font-family', $('#input_and_button_font_family').val());
        submitButton.text($('#submit_button_text').val());

        // Apply border styles
        if ($('#tah_chat_border_enable').is(':checked')) {
            chatWrapper.css('border', $('#tah_chat_border_width').val() + ' solid ' + $('#tah_chat_border_color').val());
            chatWrapper.css('border-radius', $('#tah_chat_border_radius').val());
        } else {
            chatWrapper.css('border', 'none');
        }

        // Apply chat wrapper width and height
        chatWrapper.css('width', $('#tah_chat_wrapper_width_chatbox').val() + 'px');
    }

    // Initial update of the chatbox preview
    updateChatboxPreview();

    // Event listeners for updating the chatbox preview when settings are changed
    $('#input_and_button_font_family, #tah_chat_wrapper_width_chatbox, #user_message_font_family, #user_message_font_color, #user_message_font_size, #bot_message_font_family, #bot_message_font_color, #bot_message_font_size, #input_text_color, #submit_button_color, #submit_button_text, #input_placeholder_text, #submit_button_text_color, #tah_chat_border_enable, #tah_chat_border_color, #tah_chat_border_width, #tah_chat_border_radius, #tah_chat_welcome_message').on('input change', updateChatboxPreview);
});

var selectedGameDropdown = document.getElementById('selected_game');
if (selectedGameDropdown) {
    selectedGameDropdown.addEventListener('change', function () {
        if (selectedGameDropdown.value !== 'chatbox') {
            this.form.submit();
        }
    });
}
