options.js

const menuIds = [
    "KibanaContextMenu",
    "GrafanaContextMenu",
    "UniversalPixelContextMenu",
    "ConversionPixelContextMenu",
    "RetargetingPixelContextMenu",
    "LookalikePixelContextMenu",
    "BidderCIDContextMenu",
    "GA4TotalCountContextMenu",
    "GrafanaPixelSearchContextMenu",
    "CreativeAdServerContextMenu",
    "CampaignMacroMismatchContextMenu",
    "SearchPixelIDContextMenu",
    "SearchCampaignIDContextMenu",
    "SearchAccountContextMenu",
    "SearchKnowledgeBaseContextMenu"
];

document.addEventListener('DOMContentLoaded', function() {
  chrome.storage.sync.get('serverAddress', function(data) {
    document.getElementById('serverAddress').value = data.serverAddress || '127.0.0.1:5000';
  });

  chrome.storage.sync.get('pingInterval', function(data) {
    document.getElementById('pingInterval').value = data.pingInterval || 30000;
  });

  chrome.storage.sync.get('reclick', function(data) {
      document.getElementById('reclick').value = data.reclick || 'refocus';
  });

  chrome.storage.sync.get({ windowWidth: 635, windowHeight: 685 }, function(data) {
    document.getElementById('windowWidth').value = data.windowWidth;
    document.getElementById('windowHeight').value = data.windowHeight;
  });

    function updateActiveButton() {
        const compactBtn = document.getElementById('compact');
        const comfortableBtn = document.getElementById('comfortable');
        const fullBtn = document.getElementById('full');

        const windowWidth = parseInt(document.getElementById('windowWidth').value);
        const windowHeight = parseInt(document.getElementById('windowHeight').value);

        compactBtn.classList.remove('btn-active');
        comfortableBtn.classList.remove('btn-active');
        fullBtn.classList.remove('btn-active');

        if (windowWidth === 635 && windowHeight === 685) {
            compactBtn.classList.add('btn-active');
        } else if (windowWidth === 1100 && windowHeight === 870) {
            comfortableBtn.classList.add('btn-active');
        } else if (windowWidth === 1700 && windowHeight === 1000) {
            fullBtn.classList.add('btn-active');
        }
    }

    updateActiveButton();

    const compactBtn = document.getElementById('compact');
    const comfortableBtn = document.getElementById('comfortable');
    const fullBtn = document.getElementById('full');

    compactBtn.addEventListener('click', function () {
        document.getElementById('windowWidth').value = 635;
        document.getElementById('windowHeight').value = 685;
        updateActiveButton();
    });

    comfortableBtn.addEventListener('click', function () {
        document.getElementById('windowWidth').value = 1100;
        document.getElementById('windowHeight').value = 870;
        updateActiveButton();
    });

    fullBtn.addEventListener('click', function () {
        document.getElementById('windowWidth').value = 1700;
        document.getElementById('windowHeight').value = 1000;
        updateActiveButton();
    });

    const windowWidthInput = document.getElementById('windowWidth');
    const windowHeightInput = document.getElementById('windowHeight');

    windowWidthInput.addEventListener('input', updateActiveButton);
    windowHeightInput.addEventListener('input', updateActiveButton);

  chrome.storage.sync.get(menuIds, function(items) {
      for (let key in items) {
          document.getElementById(key).checked = items[key];
      }
  });

  const kibanaCheckbox = document.getElementById('KibanaContextMenu');
  const kibanaNestedCheckboxes = [
      document.getElementById('UniversalPixelContextMenu'),
      document.getElementById('ConversionPixelContextMenu'),
      document.getElementById('RetargetingPixelContextMenu'),
      document.getElementById('LookalikePixelContextMenu'),
      document.getElementById('BidderCIDContextMenu')
  ];

  kibanaCheckbox.addEventListener('change', function() {
      kibanaNestedCheckboxes.forEach(checkbox => {
          checkbox.checked = kibanaCheckbox.checked;
      });
  });

  kibanaNestedCheckboxes.forEach(checkbox => {
      checkbox.addEventListener('change', function() {
          const allChecked = kibanaNestedCheckboxes.every(chk => chk.checked);
          const someChecked = kibanaNestedCheckboxes.some(chk => chk.checked);

          kibanaCheckbox.indeterminate = !allChecked && someChecked;
          kibanaCheckbox.checked = allChecked;
      });
  });

  const grafanaCheckbox = document.getElementById('GrafanaContextMenu');
  const grafanaNestedCheckboxes = [
    document.getElementById('GA4TotalCountContextMenu'),
    document.getElementById('GrafanaPixelSearchContextMenu'),
    document.getElementById('CampaignMacroMismatchContextMenu'),
    document.getElementById('CreativeAdServerContextMenu')
  ];

  grafanaCheckbox.addEventListener('change', function() {
    grafanaNestedCheckboxes.forEach(checkbox => {
        checkbox.checked = grafanaCheckbox.checked;
    });
  });


  grafanaNestedCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const allChecked = grafanaNestedCheckboxes.every(chk => chk.checked);
        const someChecked = grafanaNestedCheckboxes.some(chk => chk.checked);

        grafanaCheckbox.indeterminate = !allChecked && someChecked;
        grafanaCheckbox.checked = allChecked;
    });
  });

  chrome.storage.sync.get('autoToggleButtons', function(data) {
      document.getElementById('autoToggleButtons').checked = data.autoToggleButtons || false;
  });

  chrome.storage.sync.get('expandConversationHistory', function(data) {
    document.getElementById('expandConversationHistory').checked = data.expandConversationHistory || false;
  });

  chrome.storage.sync.get('hideIvyModal', function(data) {
    document.getElementById('hideIvyModal').checked = data.hideIvyModal || false;
  });

  chrome.storage.sync.get('autoSuperIntoAccount', function(data) {
    document.getElementById('autoSuperIntoAccount').checked = data.autoSuperIntoAccount || false;
  });
});

document.getElementById('save').addEventListener('click', function() {
  const reclick = document.getElementById('reclick').value;
  chrome.storage.sync.set({reclick: reclick}, function() {
    console.log('Reclick action is set to ' + reclick);
  });

  const serverAddress = document.getElementById('serverAddress').value;
  chrome.storage.sync.set({ serverAddress: serverAddress }, function() {
    console.log('Server address saved.');
  });

  const pingInterval = parseInt(document.getElementById('pingInterval').value);

  if (pingInterval < 5000) {
    document.getElementById('error-message').textContent = 'Interval must be at least 5000ms.';
    return;
  }

  chrome.storage.sync.set({ pingInterval: pingInterval }, function() {
    console.log('Ping interval saved:', pingInterval);
    document.getElementById('error-message').textContent = '';
  });

  const windowWidth = parseInt(document.getElementById('windowWidth').value);
  const windowHeight = parseInt(document.getElementById('windowHeight').value);
  chrome.storage.sync.set({ windowDimensions: { width: windowWidth, height: windowHeight } }, function() {
    console.log('Window dimensions saved:', windowWidth, 'x', windowHeight);
  });

  let settings = {};
  for (let id of menuIds) {
      settings[id] = document.getElementById(id).checked;
  }
  chrome.storage.sync.set(settings, function() {
      console.log('Context menu settings updated');
  });

  const autoToggleButtons = document.getElementById('autoToggleButtons').checked;
  chrome.storage.sync.set({ autoToggleButtons: autoToggleButtons }, function() {
      console.log('Auto toggle buttons setting saved:', autoToggleButtons);
  });

  const hideIvyModal = document.getElementById('hideIvyModal').checked;
  chrome.storage.sync.set({ hideIvyModal: hideIvyModal }, function() {
      console.log('Auto hide Ivy modal from platform setting saved:', hideIvyModal);
  });

  const expandConversationHistory = document.getElementById('expandConversationHistory').checked;
  chrome.storage.sync.set({ expandConversationHistory: expandConversationHistory }, function() {
      console.log('Expand conversation history setting saved:', expandConversationHistory);
  });

  const autoSuperIntoAccount = document.getElementById('autoSuperIntoAccount').checked;
  chrome.storage.sync.set({ autoSuperIntoAccount: autoSuperIntoAccount }, function() {
    console.log('Auto super into account setting saved:', autoSuperIntoAccount);
  });

  const flashMessage = document.getElementById('flash-message');
  flashMessage.innerHTML = `
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      Settings saved!
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  `;
  setTimeout(function() {
      flashMessage.innerHTML = '';
  }, 3000);
});