const { ipcRenderer } = require('electron');

// Wait for webview to load
const webview = document.getElementById('main-content');
webview.addEventListener('did-finish-load', () => {
  // Create and add the configuration button
  const button = document.createElement('button');
  button.id = 'config-button';
  button.innerHTML = '<i class="fas fa-cog"></i> Configuration';
  document.body.appendChild(button);

  // Add click handler to the dynamically created button
  button.addEventListener('click', () => {
    ipcRenderer.send('toggle-config');
  });
});

// Configuration panel toggle
ipcRenderer.on('toggle-config', () => {
  const panel = document.getElementById('config-panel');
  panel.classList.toggle('open');
  
  // Load saved config when panel opens
  if (panel.classList.contains('open')) {
    ipcRenderer.send('load-config');
  }
});

// Folder selection
document.getElementById('select-folder').addEventListener('click', () => {
  ipcRenderer.send('select-folder');
});

ipcRenderer.on('folder-selected', (event, path) => {
  document.getElementById('dest-folder').value = path;
});

// Form submission
document.getElementById('config-form').addEventListener('submit', (event) => {
  event.preventDefault();
  const destFolder = document.getElementById('dest-folder').value;
  const onedriveSource = document.getElementById('onedrive-source').value;
  ipcRenderer.send('set-config', { destFolder, onedriveSource });
  // Close the panel after saving
  document.getElementById('config-panel').classList.remove('open');
});

// Close button handler
document.getElementById('close-config').addEventListener('click', () => {
  document.getElementById('config-panel').classList.remove('open');
});

// Config loaded handler
ipcRenderer.on('config-loaded', (event, config) => {
  document.getElementById('dest-folder').value = config.destFolder;
  document.getElementById('onedrive-source').value = config.onedriveSource;
});