import SmpPopup from '../smpPopup';

const logEvent = (msg: string) => {
  const logEl = document.getElementById('event-log');
  if (logEl) {
    const time = new Date().toLocaleTimeString();
    if (logEl.innerHTML === 'Waiting for actions...') logEl.innerHTML = '';
    logEl.innerHTML = `<div><span style="color:#6366f1">[${time}]</span> ${msg}</div>${logEl.innerHTML}`;
  }
};

const popup = new SmpPopup({
  closeAddClass: 'icon_close g_reset_btn',
  callbackOpenOnce: (wrapperNode) => {
    logEvent(`Event: <b>callbackOpenOnce</b> fired for modal ${wrapperNode?.id || 'element'}`);
  },
  callbackCloseAlways: (wrapperNode) => {
    logEvent('Event: <b>callbackCloseAlways</b> fired for modal');
  },
});

// @ts-ignore
window.popup = popup;

document.querySelectorAll('.show_popup').forEach((el) => {
  el.addEventListener('click', (e) => {
    e.preventDefault();
    popup.show('popup_1');
  });
});

document.querySelectorAll('.show_alert').forEach((el) => {
  el.addEventListener('click', (e) => {
    e.preventDefault();
    popup.show('page_alert');
  });
});

document.querySelectorAll('.show_popup_items').forEach((el) => {
  el.addEventListener('click', (e) => {
    e.preventDefault();
    popup.show((el as HTMLElement).dataset.href || '');
  });
});

// Copy button functionality
document.getElementById('copy-btn')?.addEventListener('click', () => {
  navigator.clipboard.writeText('npm install smp-popup');
  const btn = document.getElementById('copy-btn');
  if (btn) {
    btn.innerText = 'Copied!';
    setTimeout(() => btn.innerText = 'Copy', 2000);
  }
});