import { getSettings, setSettings, clearClipboardHistory } from '../utils/storage.js'

const showDanger = document.getElementById('show-danger') as HTMLInputElement
const copyOnTranslate = document.getElementById('copy-on-translate') as HTMLInputElement
const contextMenu = document.getElementById('context-menu') as HTMLInputElement
const inlinePanel = document.getElementById('inline-panel') as HTMLInputElement
const preferredShell = document.getElementById('preferred-shell') as HTMLSelectElement
const theme = document.getElementById('theme') as HTMLSelectElement
const statusEl = document.getElementById('status') as HTMLElement

async function loadSettings() {
  const settings = await getSettings()
  showDanger.checked = settings.showDangerWarning
  copyOnTranslate.checked = settings.copyOnTranslate
  contextMenu.checked = settings.contextMenuEnabled
  inlinePanel.checked = settings.inlinePanelEnabled
  preferredShell.value = settings.preferredShell
  theme.value = settings.theme
}

async function save() {
  await setSettings({
    showDangerWarning: showDanger.checked,
    copyOnTranslate: copyOnTranslate.checked,
    contextMenuEnabled: contextMenu.checked,
    inlinePanelEnabled: inlinePanel.checked,
    preferredShell: preferredShell.value as 'bash' | 'zsh' | 'fish' | 'powershell',
    theme: theme.value as 'light' | 'dark' | 'auto',
  })
  statusEl.classList.remove('hidden')
  setTimeout(() => statusEl.classList.add('hidden'), 2000)
}

showDanger.addEventListener('change', save)
copyOnTranslate.addEventListener('change', save)
contextMenu.addEventListener('change', save)
inlinePanel.addEventListener('change', save)
preferredShell.addEventListener('change', save)
theme.addEventListener('change', save)

document.getElementById('clear-history')?.addEventListener('click', async () => {
  await clearClipboardHistory()
  statusEl.textContent = 'History cleared'
  statusEl.classList.remove('hidden')
  setTimeout(() => {
    statusEl.classList.add('hidden')
    statusEl.textContent = 'Settings saved'
  }, 2000)
})

document.getElementById('reset-settings')?.addEventListener('click', async () => {
  if (!confirm('Reset all settings to defaults?')) return
  await chrome.storage.sync.remove('screwdriver_settings')
  await loadSettings()
  statusEl.textContent = 'Settings reset'
  statusEl.classList.remove('hidden')
  setTimeout(() => {
    statusEl.classList.add('hidden')
    statusEl.textContent = 'Settings saved'
  }, 2000)
})

loadSettings()