import { DumonGeolocation } from 'dumon-geolocation';

const logArea = document.getElementById('logArea');

function appendLog(title, data) {
  const timestamp = new Date().toLocaleTimeString();
  const formatted = `[${timestamp}] ${title}\n${JSON.stringify(data, null, 2)}\n\n`;
  logArea.textContent = formatted; // + logArea.textContent;
}

async function startGeolocation() {
  DumonGeolocation.addListener('onPositionUpdate', (data) => {
    appendLog('onPositionUpdate', data);
  });

  try {
    await DumonGeolocation.startPositioning();
    appendLog('startPositioning', { success: true });
  } catch (err) {
    appendLog('startPositioning', { error: err.message });
  }
}

async function stopGeolocation() {
  try {
    await DumonGeolocation.stopPositioning();
    appendLog('stopPositioning', { success: true });
  } catch (err) {
    appendLog('stopPositioning', { error: err.message });
  }
}

async function getLatestPosition() {
  try {
    const data = await DumonGeolocation.getLatestPosition();
    appendLog('getLatestPosition', data);
  } catch (err) {
    appendLog('getLatestPosition', { error: err.message });
  }
}

window.addEventListener('DOMContentLoaded', async () => {
  document.getElementById('startButton').addEventListener('click', startGeolocation);
  document.getElementById('stopButton').addEventListener('click', stopGeolocation);
  document.getElementById('getLatestButton').addEventListener('click', getLatestPosition);


  await DumonGeolocation.configureEdgeToEdge({
    bgColor: '#ffffff',
    style: 'DARK',
    overlay: false, // atau true jika kamu ingin konten masuk ke area statusbar/navbar
  });
});