/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { transformTag } from "../../utils/renderer";
const alertContent = (message, buttons = [], alertTheme) => {
    return `${message}
    ${buttons.length
        ? `<nano-cta group="balanced" slot="footer">` +
            buttons
                .map((btn, i) => `<button 
                  data-btn="${i}" 
                  class="${btn.classes}"
                  theme="${btn.theme || alertTheme}"
                  secondary="${btn.secondary ? 'true' : 'false'}"
                >${btn.content}</button>`)
                .join('') +
            `</nano-cta>`
        : ''}
  `;
};
const addBtnHandlers = (alert, buttons = []) => {
    if (buttons.length) {
        Array.from(alert.querySelectorAll('nano-cta[slot="footer"] button')).map((btn) => {
            const foundBtn = buttons.find((_fb, i) => btn.dataset.btn === i.toString());
            if (foundBtn && foundBtn.handler) {
                btn.addEventListener('click', foundBtn.handler);
            }
        });
    }
};
/**
 * `nano-alert` helper to create toast notifications imperatively.
 * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`
 * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'
 * @param icon - name for the `nano-icon`
 * @param alertOptions - { color: Color, duration: number, closable: boolean }
 * @returns `Promise<void>`
 */
export async function nanoShowToast(message, position = 'tr', icon, alertOptions, buttons = []) {
    const opts = {
        theme: 'primary',
        duration: 3000,
        closable: true,
        ...alertOptions,
    };
    icon = icon || 'light/circle-info';
    const alert = Object.assign(document.createElement(transformTag('nano-alert')), {
        ...opts,
        open: false,
        innerHTML: `
        <nano-icon name="${icon}" slot="icon"></nano-icon>
        ${alertContent(message, buttons, opts.theme)}
      `,
    });
    addBtnHandlers(alert, buttons);
    document.body.appendChild(alert);
    return new Promise((resolve) => {
        requestAnimationFrame(async (_) => {
            await alert.toast(position);
            resolve(alert);
        });
    });
}
/**
 * `nano-alert` helper to create alert notifications imperatively.
 * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`
 * @param buttons
 * @param label - descriptive label for assitive technology
 * @param icon - name for the `nano-icon`
 * @param alertOptions
 * @returns `Promise<void>`
 */
export function nanoShowAlert(message, buttons = [], label, icon = 'light/circle-info', alertOptions = {}) {
    const opts = {
        theme: 'primary',
        duration: Infinity,
        closable: false,
        ...alertOptions,
    };
    icon = icon || 'light/circle-info';
    const alert = Object.assign(document.createElement(transformTag('nano-alert')), {
        ...opts,
        open: false,
        innerHTML: `
        ${icon ? `<nano-icon name="${icon}" slot="icon"></nano-icon>` : ''}
        ${alertContent(message, buttons, opts.theme)}
      `,
    });
    addBtnHandlers(alert, buttons);
    document.body.appendChild(alert);
    return new Promise((resolve) => {
        setTimeout(async (_) => {
            await alert.alert(label);
            resolve(alert);
        }, 100);
    });
}
