import { Html5QrcodeScanner } from 'html5-qrcode';
import Routing from '../../services/modal.service';
import Services from '../../services/service';
import { addSubscription } from '../../utils/subscription.utils';
import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils';

let resultContainer = document.getElementById('qr-reader-results');
let lastResult: any,
  countResults = 0;

export async function initHomePage(): Promise<void> {
  console.log('INIT');
  document.querySelectorAll('.tab').forEach((tab) => {
    addSubscription(tab, 'click', () => {
      document.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
      tab.classList.add('active');

      document.querySelectorAll('.tab-content').forEach((content) => content.classList.remove('active'));
      document.getElementById(tab.getAttribute('data-tab') as string)?.classList.add('active');
    });
  });

  const service = await Services.getInstance();
  const spAddress = await service.getDeviceAddress();
  generateQRCode(spAddress);
  displayEmojis(spAddress);

  const notifBell = document.getElementById('notification-bell');
  if (notifBell) addSubscription(notifBell, 'click', openCloseNotifications);

  var html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: 250 }, undefined);
  html5QrcodeScanner.render(onScanSuccess, undefined);

  docReady(() => {
    scanDevice();
  });
}

async function onScanSuccess(decodedText: any, decodedResult: any) {
  if (lastResult === decodedText) {
    return;
  }
  lastResult = decodedText;
  ++countResults;
  // Handle on success condition with the decoded message.
  console.log(`Scan result ${decodedText}`, decodedResult);
  try {
    // Attempt to parse the decoded text as a URL
    const scannedUrl = new URL(decodedText);

    // Extract the 'sp_address' parameter
    const spAddress = scannedUrl.searchParams.get('sp_address');

    if (spAddress) {
      html5QrcodeScanner.clear();
      const service = await Services.getInstance();
      // Call the sendPairingTx function with the extracted sp_address
      await service.sendPairingTx(spAddress);
    } else {
      console.error('The scanned URL does not contain the sp_address parameter.');
      alert('Invalid QR code: sp_address parameter missing.');
    }
  } catch (error) {
    // Handle cases where decodedText is not a valid URL
    console.error('Scanned text is not a valid URL:', error);
    alert('Invalid QR code: Unable to parse URL.');
  }
}
export function toggleMenu() {
  let menu = document.getElementById('menu');
  if (menu) {
    if (menu.style.display === 'block') {
      menu.style.display = 'none';
    } else {
      menu.style.display = 'block';
    }
  }
}

//// Modal
export async function openModal(myAddress: string, receiverAddress: string) {
  const router = await Routing.getInstance();
  router.openLoginModal(myAddress, receiverAddress);
}

function openCloseNotifications() {
  const notifications = document.querySelector('.notification-board') as HTMLDivElement;
  notifications.style.display = notifications?.style.display === 'none' ? 'block' : 'none';
}

// const service =  await Services.getInstance()
// service.setNotification()

(window as any).toggleMenu = toggleMenu;
(window as any).openModal = openModal;

/// Scan QR Code
function docReady(fn: any) {
  // see if DOM is already available
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    // call on next available tick
    setTimeout(fn, 1);
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

function scanDevice() {
  const scannerImg = document.querySelector('#scanner') as HTMLElement;
  if (scannerImg) scannerImg.style.display = 'none';
  const scannerQrCode = document.querySelector('.qr-code-scanner') as HTMLElement;
  if (scannerQrCode) scannerQrCode.style.display = 'block';
}

(window as any).scanDevice = scanDevice;