import { camelToDashed } from '@_unit/unit/lib/client/id'
import { Dict } from '@_unit/unit/lib/types/Dict'
import { allCheckboxes } from './userSettings'

const checkboxMap: Dict<HTMLInputElement> = {}

const setupCheckbox = (key: string) => {
  const domId = `museme-checkbox-${camelToDashed(key)}`

  const checkbox = document.getElementById(domId) as HTMLInputElement

  checkboxMap[key] = checkbox

  checkbox.addEventListener('change', () => {
    const { checked } = checkbox

    chrome.storage.sync.set({ [key]: checked })

    sendActiveTabMessage({ type: key, data: checked })
  })

  chrome.storage.sync.get([key], ({ [key]: value }) => {
    checkbox.checked = value ?? true
  })
}

for (const checkboxKey of allCheckboxes) {
  setupCheckbox(checkboxKey)
}

function sendActiveTabMessage(data): Promise<void> {
  return new Promise((resolve) => {
    chrome.tabs.query({}, function (tabs) {
      const extendedTabs = tabs.filter((tab) => {
        const { url } = tab

        return !!url
      })

      for (const tab of extendedTabs) {
        chrome.tabs.sendMessage(tab.id, data)
      }

      resolve()
    })
  })
}

export default null