const toggle = document.getElementById('toggle');
const status = document.getElementById('status');

function render(enabled) {
  toggle.classList.toggle('active', enabled);
  toggle.setAttribute('aria-checked', String(enabled));
  status.textContent = enabled ? 'Blocking is ON' : 'Blocking is OFF';
}

// read and write the state straight from storage, so the toggle works even
// if the background page is currently unloaded
browser.storage.local.get({ blockingEnabled: true })
  .then(result => render(result.blockingEnabled))
  .catch(() => render(true));

toggle.addEventListener('click', () => {
  const enabled = !toggle.classList.contains('active');
  render(enabled);
  browser.storage.local.set({ blockingEnabled: enabled });
});