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

    const myTimeout = setTimeout(playAudio, 4000);
    let playing = false;

    function playAudio() {
        // Check if UIkit.modal.confirm has different options in the new version
        const modal = UIkit.modal.confirm(
            '<h3>Do you want to hear the sounds of Moment?</h3>',
            {
                labels: { ok: 'Yes', cancel: 'No' }
			}).then(
    function () { console.log('Yes selected'); },
    function () { console.log('No selected'); }
        );

        // Handle the modal's promise resolution
        modal.then(
            function () {
                console.log('Ok.');
                playing = true;
                $('.playButton').addClass('soundPlay').removeClass('soundStop');
                $('.soundDialog').fadeIn(1000);
                $('#player').trigger('play');
            },
            function () {
                console.log('No.');
                playing = false;
                $('.playButton').addClass('soundStop').removeClass('soundPlay');
                $('.soundDialog').fadeIn(1000);
                $('#player').trigger('pause');
            }
        );
    }

    // Play button click handler
    $('.playButton').on('click', function () {
        if (playing) {
            console.log('Pause');
            $('.playButton').addClass('soundStop').removeClass('soundPlay');
            $('#player').trigger('pause');
            $('.soundDialog').fadeOut(2000);
            playing = false;
        } else {
            console.log('Play');
            $('.playButton').addClass('soundPlay').removeClass('soundStop');
            $('#player').trigger('play');
            $('.soundDialog').fadeOut(2000);
            playing = true;
        }
    });
});