popup.js

// Get current domain from active tab
async function getCurrentDomain() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const url = new URL(tab.url);
  return url.hostname;
}

// Get current tab
async function getCurrentTab() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  return tab;
}

// Load settings for current domain
async function loadSettings() {
  const domain = await getCurrentDomain();
  document.getElementById('currentDomain').textContent = `Current domain: ${domain}`;
  
  const key = `settings_${domain}`;
  const result = await chrome.storage.local.get(key);
  const settings = result[key] || { rtl: false, font: false, both: false };
  
  document.getElementById('rtlSwitch').checked = settings.rtl;
  document.getElementById('fontSwitch').checked = settings.font;
  document.getElementById('bothSwitch').checked = settings.both;
}

// Save settings for current domain
async function saveSettings() {
  const domain = await getCurrentDomain();
  const settings = {
    rtl: document.getElementById('rtlSwitch').checked,
    font: document.getElementById('fontSwitch').checked,
    both: document.getElementById('bothSwitch').checked
  };
  
  const key = `settings_${domain}`;
  await chrome.storage.local.set({ [key]: settings });
  
  // Apply settings to current tab
  const tab = await getCurrentTab();
  chrome.tabs.sendMessage(tab.id, { action: 'applySettings', settings });
}

// Handle switch changes
function setupEventListeners() {
  const rtlSwitch = document.getElementById('rtlSwitch');
  const fontSwitch = document.getElementById('fontSwitch');
  const bothSwitch = document.getElementById('bothSwitch');
  
  // When "both" is toggled, disable/enable the other switches
  bothSwitch.addEventListener('change', () => {
    if (bothSwitch.checked) {
      rtlSwitch.checked = false;
      fontSwitch.checked = false;
      rtlSwitch.disabled = true;
      fontSwitch.disabled = true;
    } else {
      rtlSwitch.disabled = false;
      fontSwitch.disabled = false;
    }
    saveSettings();
  });
  
  // When rtl or font is toggled, uncheck "both"
  rtlSwitch.addEventListener('change', () => {
    if (rtlSwitch.checked) {
      bothSwitch.checked = false;
      bothSwitch.disabled = true;
    } else {
      bothSwitch.disabled = false;
    }
    saveSettings();
  });
  
  fontSwitch.addEventListener('change', () => {
    if (fontSwitch.checked) {
      bothSwitch.checked = false;
      bothSwitch.disabled = true;
    } else {
      bothSwitch.disabled = false;
    }
    saveSettings();
  });
}

// Tab switching functionality
function setupTabs() {
  const tabButtons = document.querySelectorAll('.tab-button');
  
  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      // Remove active class from all buttons and contents
      document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
      document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
      
      // Add active class to clicked button
      button.classList.add('active');
      
      // Show corresponding tab content
      const tabName = button.getAttribute('data-tab');
      if (tabName === 'settings') {
        document.getElementById('settingsTab').classList.add('active');
      } else if (tabName === 'about') {
        document.getElementById('aboutTab').classList.add('active');
      }
    });
  });
}

// Initialize popup
document.addEventListener('DOMContentLoaded', async () => {
  setupTabs();
  await loadSettings();
  setupEventListeners();
});