// Initialize a layer trigger
const layerLogin = $('#layerLogin').bsLayer({
    name: 'login-layer',
    // url: 'login.html',
    onPostBody: function ($content) {
        // Callback after content loaded
    }
});

// You can send your own events to the layer
$.bsLayer.customEvent('login-layer', 'event-name', ...params);

// Or close all layers with once
$.bsLayer.closeAll();

// Example: Centrally adjust global configuration for all layers
$.bsLayer.setConfig({
    fullWidthBreakpoint: 768,    // Default is 576, here changed to 768 px
    animationDuration: 400,      // Layer animation now lasts 400 ms
    icons: {
        close: 'bi bi-x',
        maximize: 'bi bi-fullscreen',
        minimize: 'bi bi-fullscreen-exit',
        refresh: 'bi bi-arrow-clockwise'
    }
});

// Optional: Overwrite the global onError callback function
$.bsLayer.onError = function ($msg) {
    // Custom error handling
    alert('Layer error: ' + $msg);
};

$('#btnLayerExample').bsLayer({
    ajax: {
        method: 'POST'
    },
    name: 'example-layer',
    title: 'My Example Layer',
    width: 600,
    backdrop: true,
    url: 'example-content.php',
    refreshable: true,
    closeable: true,
    expandable: false,
    queryParams: function (params) {
        params.userId = 123;
        return params;
    },
    onShown: function ($content) {
        console.log('Layer wurde angezeigt');
    },
    onAll: function (eventName, ...args) {
        console.log('Event:', eventName, args);
    }
});

// You can also supply a function to the `url` option that returns a Promise. This allows you to load dynamic content asynchronously, for example via an API call or any custom logic.
// The function can be defined either as an `async` function or as a regular function returning a Promise. The most important point is that the return value is a Promise that resolves with the HTML/string content.
$('#btnLayerExample').bsLayer({
    name: 'promise-layer',
    title: 'Async Content Layer',
    width: 600,
    backdrop: true,
    queryParams(params) {
        // You can dynamically modify or extend parameters here
        params.id = 1;
        params.token = 'demo-123'; // Example: add extra parameter
        return params;
    },
    // `url` as a Promise function: receives params and can use them
    url: async function(params) {
        // Example: use params for dynamic content or API call
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                // You can use params.id, params.token, etc. as needed
                resolve(
                    `<div class="p-4">
                    <h3>Async loaded content 🚀</h3>
                    <p>This content was loaded via Promise!</p>
                    <div>Params: <code>${JSON.stringify(params)}</code></div>
                </div>`
                );
            }, 1000);
        });
    },
    refreshable: true,
    onShown: function ($content) {
        console.log('Async layer shown');
    }
});

$('#myLayerBtn').bsLayer('setTitle', 'New Title');
$('#myLayerBtn').bsLayer('show');
$('#myLayerBtn').bsLayer('refresh');
$('#myLayerBtn').bsLayer('close');