document.addEventListener('DOMContentLoaded', function() {
  const domainInput = document.getElementById('domainInput');
  const addDomainButton = document.getElementById('addDomainButton');
  const domainList = document.getElementById('domainList');

  // Load the current list of domains
  browser.storage.sync.get('domains', function(data) {
    const domains = data.domains || [];
    if (domains.length === 0) {
      updateDomainList(["https://gitlab.com"]);
    } else {
      updateDomainList(domains);
    }
  });

  // Function to update the displayed domain list
  function updateDomainList(domains) {
    domainList.innerHTML = '';
    domains.forEach(function(domain) {
      const li = document.createElement('li');
      li.textContent = domain;

      // Add a delete button for each domain
      const deleteButton = document.createElement('button');
      deleteButton.textContent = 'Delete';
      deleteButton.addEventListener('click', function() {
        // Remove the domain and update the list
        const updatedDomains = domains.filter(d => d !== domain);
        browser.storage.sync.set({ 'domains': updatedDomains }, function() {
          updateDomainList(updatedDomains);
        });
      });

      li.appendChild(deleteButton);
      domainList.appendChild(li);
    });
  }


  // Add domain button click event
  addDomainButton.addEventListener('click', function() {
    const domain = domainInput.value.trim();

    if (domain !== '') {
      // Update the list of domains
      browser.storage.sync.get('domains', function(data) {
        const domains = data.domains || [];
        domains.push(domain);

        // Save the updated list
        browser.storage.sync.set({ 'domains': domains }, function() {
          // Update the displayed list
          updateDomainList(domains);

          // Clear the input field
          domainInput.value = '';
        });
      });
    }
  });
});