// Generated, do not edit. sha256:26856efc0d14b9a73e26fd078294b6d0c3f7eebff4e23cc52adf3839ca9c9ebe
import { esc } from './escape.js';

const CLOSE = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
const DEFAULT_LABELS = Object.freeze({
  ok: 'OK', cancel: 'Cancel', close: 'Close', next: 'Next', back: 'Back', finish: 'Finish', skip: 'Skip',
});

let labels = { ...DEFAULT_LABELS };
let closeIcon = CLOSE;
let onDetail = null;

export function configureDialog({ labels: l = null, closeIcon: icon = null, onDetail: hook } = {}) {
  labels = { ...DEFAULT_LABELS, ...(l || {}) };
  closeIcon = icon || CLOSE;
  onDetail = typeof hook === 'function' ? hook : null;
}

let overlayEl = null;
let activeResolve = null;
let overlayIsDetail = false;

export function isDialogOpen(el = null) {
  if (topEl) return true;
  if (!overlayEl) return false;
  return !(el && overlayEl.contains(el));
}

let prevOverflow = null;
let prevPadding = null;

function lockPage() {
  if (prevOverflow !== null) return;
  const el = document.documentElement;
  const gutter = window.innerWidth - el.clientWidth;
  prevOverflow = el.style.overflow;
  prevPadding = el.style.paddingRight;
  el.style.overflow = 'hidden';
  if (gutter > 0) el.style.paddingRight = `${gutter}px`;
}

function unlockPage() {
  if (prevOverflow === null) return;
  const el = document.documentElement;
  el.style.overflow = prevOverflow;
  el.style.paddingRight = prevPadding;
  prevOverflow = null;
  prevPadding = null;
}

function settle(result) {
  if (topEl) settleTop(false);
  document.removeEventListener('keydown', onKey, true);
  if (overlayEl) { overlayEl.remove(); overlayEl = null; }
  overlayIsDetail = false;
  unlockPage();
  const r = activeResolve; activeResolve = null;
  if (r) r(result);
}
function onKey(e) {
  if (!overlayEl || topEl) return;
  if (overlayIsDetail && e.target && typeof e.target.matches === 'function' && overlayEl.contains(e.target)
    && e.target.matches('input, select, textarea')) return;
  if (e.key === 'Escape') { e.preventDefault(); settle(false); }
}

let topEl = null;
let topResolve = null;
let topReturn = null;

function settleTop(result) {
  document.removeEventListener('keydown', onKeyTop, true);
  if (topEl) { topEl.remove(); topEl = null; }
  const r = topResolve; topResolve = null;
  if (topReturn && topReturn.isConnected) topReturn.focus();
  topReturn = null;
  if (r) r(result);
}
function onKeyTop(e) {
  if (topEl && e.key === 'Escape') { e.preventDefault(); settleTop(false); }
}

export function confirmOver({ title, message, confirmLabel, cancelLabel, danger } = {}) {
  if (!overlayEl) return confirm({ title, message, confirmLabel, cancelLabel, danger });
  return openTop({ title, bodyHtml: `<div class="dialog-body">${esc(message)}</div>`,
    showCancel: true, confirmLabel, cancelLabel, danger });
}

function openTop({ title, bodyHtml, showCancel, confirmLabel, cancelLabel, danger, collect = null }) {
  if (topEl) settleTop(false);
  return new Promise(resolve => {
    topResolve = resolve;
    topReturn = document.activeElement;
    topEl = document.createElement('div');
    topEl.className = 'dialog-overlay dialog-overlay--stacked';
    topEl.innerHTML = `
      <div class="dialog" role="${collect ? 'dialog' : 'alertdialog'}" aria-modal="true" tabindex="-1">
        ${title ? `<div class="dialog-title">${esc(title)}</div>` : ''}
        ${bodyHtml}
        <div class="dialog-actions">
          ${showCancel ? `<button type="button" class="btn btn-ghost btn-md" data-dlg="cancel">${esc(cancelLabel || labels.cancel)}</button>` : ''}
          <button type="button" class="btn ${danger ? 'btn-danger' : 'btn-primary'} btn-md" data-dlg="ok">${esc(confirmLabel || labels.ok)}</button>
        </div>
      </div>`;
    const outcome = ok => (collect ? (ok ? collect(topEl) : null) : ok);
    topEl.addEventListener('click', e => {
      const b = e.target.closest('[data-dlg]');
      if (b) settleTop(outcome(b.dataset.dlg === 'ok'));
    });
    if (collect) {
      topEl.addEventListener('keydown', e => {
        if (e.key === 'Enter' && e.target.matches('input[data-dlg-field]')) { e.preventDefault(); settleTop(outcome(true)); }
      });
    }
    document.body.appendChild(topEl);
    document.addEventListener('keydown', onKeyTop, true);
    (topEl.querySelector('[data-dlg-field]') || topEl.querySelector('[data-dlg="ok"]')).focus();
  });
}

function open({ title, message, bodyHtml, wide, confirmLabel, cancelLabel, danger, showCancel, showOk = true,
  closeCross = false, titleAside = false }) {
  if (overlayEl) settle(false);
  return new Promise(resolve => {
    activeResolve = resolve;
    const confirmCls = danger ? 'btn-danger' : 'btn-primary';
    overlayEl = document.createElement('div');
    overlayEl.className = 'dialog-overlay';
    const actions = showCancel || showOk ? `
        <div class="dialog-actions">
          ${showCancel ? `<button type="button" class="btn btn-ghost btn-md" data-dlg="cancel">${esc(cancelLabel || labels.cancel)}</button>` : ''}
          ${showOk ? `<button type="button" class="btn ${confirmCls} btn-md" data-dlg="ok">${esc(confirmLabel || labels.ok)}</button>` : ''}
        </div>` : '';
    const body = bodyHtml != null
      ? `<div class="dialog-body dialog-body--rich">${bodyHtml}</div>`
      : `<div class="dialog-body">${esc(message)}</div>`;
    const head = title
      ? `<div class="dialog-title">
           <span class="dialog-title-text">${esc(title)}</span>
           ${titleAside ? '<span class="dialog-title-aside" data-dialog-aside></span>' : ''}
         </div>`
      : '';
    const cross = closeCross
      ? `<button type="button" class="dialog-close" data-dlg="cancel" aria-label="${esc(labels.close)}"
                 title="${esc(labels.close)}">${closeIcon}</button>`
      : '';
    overlayEl.innerHTML = `
      <div class="dialog${wide ? ' dialog--wide' : ''}" role="dialog" aria-modal="true" tabindex="-1">
        ${cross}${head}${body}${actions}
      </div>`;
    const backdropCloses = !(showOk || showCancel || closeCross);
    overlayEl.addEventListener('click', e => {
      if (e.target === overlayEl) { if (backdropCloses) settle(false); return; }
      const b = e.target.closest('[data-dlg]');
      if (b) settle(b.dataset.dlg === 'ok');
    });
    document.body.appendChild(overlayEl);
    lockPage();
    document.addEventListener('keydown', onKey, true);
    (overlayEl.querySelector('[data-dlg="ok"]') || overlayEl.querySelector('.dialog')).focus();
  });
}

export function stepper({ title, steps, state = {}, skipLabel, finishLabel, hero = '' } = {}) {
  if (overlayEl) settle(false);
  return new Promise(resolve => {
    activeResolve = resolve;
    const visible = () => steps.filter(s => !(s.skip && s.skip(state)));
    let i = 0;
    overlayEl = document.createElement('div');
    overlayEl.className = 'dialog-overlay dialog-overlay--focus';
    overlayEl.innerHTML = `
      <div class="dialog dialog--wide dialog-stepper${hero ? ' dialog-stepper--hero' : ''}" role="dialog" aria-modal="true" tabindex="-1">
        ${hero ? `<div class="stepper-hero" aria-hidden="true">${hero}</div>` : ''}
        ${title ? `<div class="dialog-title"><span class="dialog-title-text">${esc(title)}</span></div>` : ''}
        <div class="dialog-body dialog-body--rich"></div>
        <div class="dialog-actions stepper-actions"></div>
      </div>`;
    const body = overlayEl.querySelector('.dialog-body');
    const actions = overlayEl.querySelector('.stepper-actions');
    const draw = () => {
      const list = visible();
      i = Math.min(i, list.length - 1);
      const step = list[i];
      const last = i === list.length - 1;
      const ready = !step.ready || step.ready(state);
      body.innerHTML = `${step.title ? `<div class="stepper-title">${esc(step.title)}</div>` : ''}${step.html(state)}`;
      actions.innerHTML = `
        <button type="button" class="btn btn-ghost btn-md stepper-skip" data-step="skip">${esc(skipLabel || labels.skip)}</button>
        ${i > 0 ? `<button type="button" class="btn btn-ghost btn-md" data-step="back">${esc(labels.back)}</button>` : ''}
        <button type="button" class="btn btn-primary btn-md" data-step="next"${ready ? '' : ' disabled'}>${esc(last ? (finishLabel || labels.finish) : labels.next)}</button>`;
      const focus = overlayEl.querySelector('[data-step="next"]:not([disabled])') || overlayEl.querySelector('.dialog');
      focus.focus();
    };
    overlayEl.addEventListener('click', e => {
      const set = e.target.closest('[data-step-set]');
      if (set) { state[set.dataset.stepSet] = set.dataset.value; draw(); return; }
      const toggle = e.target.closest('[data-step-toggle]');
      if (toggle) {
        const key = toggle.dataset.stepToggle;
        const v = toggle.dataset.value;
        const list = Array.isArray(state[key]) ? state[key] : [];
        state[key] = list.includes(v) ? list.filter(x => x !== v) : [...list, v];
        draw();
        return;
      }
      const b = e.target.closest('[data-step]');
      if (!b || b.disabled) return;
      if (b.dataset.step === 'skip') settle(false);
      else if (b.dataset.step === 'back') { i = Math.max(0, i - 1); draw(); }
      else if (i === visible().length - 1) settle(state);
      else { i += 1; draw(); }
    });
    document.body.appendChild(overlayEl);
    lockPage();
    document.addEventListener('keydown', onKey, true);
    draw();
  });
}

export function confirm({ title, message, confirmLabel, cancelLabel, danger } = {}) {
  if (overlayEl && overlayIsDetail) return confirmOver({ title, message, confirmLabel, cancelLabel, danger });
  return open({ title, message, confirmLabel, cancelLabel, danger, showCancel: true });
}

export function alert({ title, message, confirmLabel } = {}) {
  if (overlayEl && overlayIsDetail) {
    return openTop({ title, bodyHtml: `<div class="dialog-body">${esc(message)}</div>`, showCancel: false, confirmLabel });
  }
  return open({ title, message, confirmLabel, danger: false, showCancel: false });
}

export function notice({ title, message } = {}) {
  return open({ title, message, showCancel: false, showOk: false });
}

export function detail({ title, html, size, titleHtml, asideHtml } = {}) {
  const done = open({ title, bodyHtml: html ?? '', wide: true, showCancel: false, showOk: false,
    closeCross: true, titleAside: true });
  overlayIsDetail = true;
  const d = overlayEl.querySelector('.dialog');
  if (size === 'xl') d.classList.add('dialog--xl');
  if (titleHtml) d.querySelector('.dialog-title-text').innerHTML = titleHtml;
  if (asideHtml) d.querySelector('[data-dialog-aside]').innerHTML = asideHtml;
  if (onDetail) onDetail(d, done);
  return done;
}

function fieldsHtml(fields) {
  return `<div class="dialog-body">
          ${fields.map(f => `
            <div class="form-group">
              <label class="form-label">${esc(f.label)}</label>
              ${f.type === 'textarea'
                ? `<textarea class="input" rows="4" data-dlg-field="${esc(f.key)}" placeholder="${esc(f.placeholder ?? '')}" autocomplete="off">${esc(f.value ?? '')}</textarea>`
                : f.type === 'select'
                  ? `<select class="input" data-dlg-field="${esc(f.key)}">${(f.options || []).map(o =>
                      `<option value="${esc(o.value)}"${String(o.value) === String(f.value ?? '') ? ' selected' : ''}>${esc(o.label)}</option>`).join('')}</select>`
                  : `<input class="input" type="${esc(f.type || 'text')}" data-dlg-field="${esc(f.key)}"
                       value="${esc(f.value ?? '')}" placeholder="${esc(f.placeholder ?? '')}" autocomplete="off">`}
            </div>`).join('')}
        </div>`;
}
const fieldValues = host => {
  const out = {};
  host.querySelectorAll('[data-dlg-field]').forEach(i => { out[i.dataset.dlgField] = i.value; });
  return out;
};

export function form({ title, fields = [], confirmLabel, cancelLabel } = {}) {
  if (overlayEl && overlayIsDetail) {
    return openTop({ title, bodyHtml: fieldsHtml(fields), showCancel: true, confirmLabel, cancelLabel, collect: fieldValues });
  }
  if (overlayEl) settle(false);
  return new Promise(resolve => {
    activeResolve = resolve;
    overlayEl = document.createElement('div');
    overlayEl.className = 'dialog-overlay';
    overlayEl.innerHTML = `
      <div class="dialog" role="dialog" aria-modal="true">
        ${title ? `<div class="dialog-title">${esc(title)}</div>` : ''}
        ${fieldsHtml(fields)}
        <div class="dialog-actions">
          <button type="button" class="btn btn-ghost btn-md" data-dlg="cancel">${esc(cancelLabel || labels.cancel)}</button>
          <button type="button" class="btn btn-primary btn-md" data-dlg="ok">${esc(confirmLabel || labels.ok)}</button>
        </div>
      </div>`;
    const values = () => fieldValues(overlayEl);
    overlayEl.addEventListener('click', e => {
      if (e.target === overlayEl) return;
      const b = e.target.closest('[data-dlg]');
      if (b) settle(b.dataset.dlg === 'ok' ? values() : null);
    });
    overlayEl.addEventListener('keydown', e => {
      if (e.key === 'Enter' && e.target.matches('input[data-dlg-field]')) { e.preventDefault(); settle(values()); }
    });
    document.body.appendChild(overlayEl);
    lockPage();
    document.addEventListener('keydown', onKey, true);
    const first = overlayEl.querySelector('[data-dlg-field]');
    if (first) first.focus();
  });
}