/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { N as NAMESPACE } from './index-BM3Om9WE.js';
import { t as transformTag, s as setTagPrefix } from './renderer-DpNDfhNy.js';
export { g as getTagPrefix } from './renderer-DpNDfhNy.js';
export { d as nanoDebounce, t as nanoThrottle } from './throttle-C93FMm2Z.js';
export { g as nanoGetTabElements } from './tabbable-BgopY-vd.js';

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>`
 */
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>`
 */
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);
    });
}

/**
 * `nano-dialog` helper to create dialog modals imperatively.
 * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`
 * @param buttons - { classes: string; content: string; handler: () => {} }[]
 * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }
 * @returns `Promise<void>`
 */
function nanoCreateDialog(body, buttons = [], dialogOptions) {
    const opts = {
        noUserDismiss: false,
        label: 'Dialog',
        ...dialogOptions,
    };
    const dialog = Object.assign(document.createElement(transformTag('nano-dialog')), {
        ...opts,
        open: false,
        innerHTML: `
      ${body}
      ${buttons.length
            ? `<nano-cta group="balanced" slot="footer">` +
                buttons
                    .map((btn, i) => `<button 
                  data-btn="${i}" 
                  class="${btn.classes}"
                  theme="${btn.theme}"
                  secondary="${btn.secondary ? 'true' : 'false'}"
                >${btn.content}</button>`)
                    .join('') +
                `</nano-cta>`
            : ''}`,
    });
    if (buttons.length) {
        Array.from(dialog.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);
            }
        });
    }
    document.body.appendChild(dialog);
    return new Promise((resolve) => {
        requestAnimationFrame(async (_) => {
            await dialog.show();
            resolve(dialog);
        });
    });
}

// import { setPlatformHelpers } from '@stencil/core';
// @ts-expect-error - NAMESPACE isn't officially exported
function componentPrefix(prefix) {
    if (!window || !document)
        return;
    const tagTransform = setTagPrefix(prefix);
    const autoLoaderScript = document.querySelector(`script[src$="/${NAMESPACE}.esm.js"]`);
    if (autoLoaderScript) {
        autoLoaderScript['data-opts'] = {
            transformTagName: tagTransform,
        };
    }
    return tagTransform;
}
const initialize = (helpers = {}) => {
    if (typeof window === 'undefined') {
        return;
    }
    // setPlatformHelpers(platformHelpers);
};

export { componentPrefix, initialize, nanoCreateDialog, nanoShowAlert, nanoShowToast, transformTag };
