Dialog

/**
 * Simple Alert - from public/showcase/elements/dialog.
 */
export function mount(root) {
    $(root).find('#quick-alert').on('click', async () => {
        await E.alert('This is an alert message!');
    });
}

/**
 * Tutorial - from public/showcase/elements/dialog.
 *
 * The result panel binds to two observables - the message and its colour
 * class - so each step of the flow just sets them.
 */
export function mount(root) {
    const message = M.observable('Click "Delete Item" to start the flow');
    const tone = M.observable('text-muted');
    const show = (text, cls) => { message.value = text; tone.value = cls; };
    const handle = M.applyBindings({message, tone}, root.querySelector('#tutorial-result'));

    // Tutorial
    $(root).find('#tutorial-delete').on('click', async () => {
        show('Processing...', 'text-muted');

        const confirmed = await E.confirm(
            'Are you sure you want to delete this item?',
            {
                title: 'Confirm Deletion',
                confirmText: 'Delete',
                cancelText: 'Cancel'
            }
        );

        if (!confirmed) {
            show('Deletion cancelled by user.', 'text-warning');
            return;
        }

        const input = await E.prompt(
            'Type "DELETE" to confirm:',
            {
                title: 'Final Confirmation',
                inputPlaceholder: 'Type DELETE'
            }
        );

        if (input === 'DELETE') {
            show('✓ Item deleted successfully!', 'text-success');
        } else {
            show(`Deletion cancelled - you typed "${input || '(nothing)'}" instead of "DELETE".`, 'text-warning');
        }
    });

    return () => handle.dispose();
}

/**
 * Alert Dialog - from public/showcase/elements/dialog.
 */
export function mount(root) {
        // Examples
    $(root).find('#ex-alert').on('click', async () => {
            await E.alert('Operation completed successfully!', {
                title: 'Success'
            });
        });
}

/**
 * Confirm Dialog - from public/showcase/elements/dialog.
 */
export function mount(root) {
    $(root).find('#ex-confirm').on('click', async () => {
        const result = await E.confirm('Do you want to proceed?', {
            title: 'Confirm Action',
            confirmText: 'Yes',
            cancelText: 'No'
        });
      $(root).find('#confirm-result').text(result ? 'Confirmed' : 'Cancelled');
    });
}

/**
 * Prompt Dialog (Text) - from public/showcase/elements/dialog.
 */
export function mount(root) {
    $(root).find('#ex-prompt-text').on('click', async () => {
        const result = await E.prompt('What is your name?', {
            title: 'User Information',
            inputPlaceholder: 'Enter your name'
        });
      $(root).find('#prompt-text-result').text(result || '(cancelled)');
    });
}

/**
 * Prompt Dialog (Email) - from public/showcase/elements/dialog.
 */
export function mount(root) {
    $(root).find('#ex-prompt-email').on('click', async () => {
        const result = await E.prompt('Enter your email:', {
            title: 'Email Address',
            inputPlaceholder: 'you@example.com',
            inputType: 'email'
        });
      $(root).find('#prompt-email-result').text(result || '(cancelled)');
    });
}

/**
 * Custom Button Text - from public/showcase/elements/dialog.
 */
export function mount(root) {
    $(root).find('#ex-custom').on('click', async () => {
        const confirmed = await E.confirm(
            'This action cannot be undone. Are you absolutely sure?',
            {
                title: 'Delete Account',
                confirmText: 'Yes, Delete My Account',
                cancelText: 'Cancel'
            }
        );
        if (confirmed) {
            await E.alert('Account deletion initiated.', {title: 'Account Deleted'});
        }
    });
}