import Routing from '../../services/modal.service';
import Services from '../../services/service';
import { addSubscription } from '../../utils/subscription.utils';
import { displayEmojis, generateQRCode, generateCreateBtn, addressToEmoji } from '../../utils/sp-address.utils';
import { getCorrectDOM } from '../../utils/html.utils';
import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component';
import { navigate, registerAllListeners } from '../../router';

export { QrScannerComponent };
export async function initHomePage(): Promise<void> {
  console.log('INIT-HOME');
  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
  container.querySelectorAll('.tab').forEach((tab) => {
    addSubscription(tab, 'click', () => {
      container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
      tab.classList.add('active');

      container.querySelectorAll('.tab-content').forEach((content) => content.classList.remove('active'));
      container.querySelector(`#${tab.getAttribute('data-tab') as string}`)?.classList.add('active');
    });
  });

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

  // Add this line to populate the select when the page loads
  await populateMemberSelect();
}

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

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

function scanDevice() {
  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
  const scannerImg = container.querySelector('#scanner') as HTMLElement;
  if (scannerImg) scannerImg.style.display = 'none';
  const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
  if (scannerQrCode) scannerQrCode.style.display = 'block';
  const scanButton = container?.querySelector('#scan-btn') as HTMLElement;
  if (scanButton) scanButton.style.display = 'none';
  const reader = container?.querySelector('#qr-reader');
  if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
}

async function populateMemberSelect() {
  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
  const memberSelect = container.querySelector('#memberSelect') as HTMLSelectElement;

  if (!memberSelect) {
    console.error('Could not find memberSelect element');
    return;
  }

  const service = await Services.getInstance();
  const members = await service.getAllMembersSorted();

  for (const [processId, member] of Object.entries(members)) {
    const process = await service.getProcess(processId);
    let memberPublicName;

    if (process) {
      const publicMemberData = service.getPublicData(process);
      if (publicMemberData) {
        const extractedName = publicMemberData['memberPublicName'];
        if (extractedName !== undefined && extractedName !== null) {
          memberPublicName = extractedName;
        }
      }
    }

    if (!memberPublicName) {
      memberPublicName = 'Unnamed Member';
    }

    // Récupérer les emojis pour ce processId
    const emojis = await addressToEmoji(processId);

    const option = document.createElement('option');
    option.value = processId;
    option.textContent = `${memberPublicName} (${emojis})`;
    memberSelect.appendChild(option);
  }
}

(window as any).populateMemberSelect = populateMemberSelect;

(window as any).scanDevice = scanDevice;