// DEACTIVATE_KEY = 'deactivate-this-extension-pls-interactive-fics-yalla-bina';
// MUTATION_OBSERVER_KEY = 'observe-this-dom-pls-interactive-fics-yalla-bina';
//
//
// document.addEventListener('DOMContentLoaded', function () {
//   // event listeners
//   document.getElementById('change-name-form').addEventListener('submit', changeName)
//   document.getElementById('replace-other-words-form').addEventListener('submit', replaceOther)
//   document.getElementById('show-saved').addEventListener('click', loadSaved)
//   document.getElementById('refresh-replacements').addEventListener('click', refreshReplacements)
//   document.getElementById('enable-observer').addEventListener('click', toggleMutationObserver)
//   document.getElementById('toggle').addEventListener('click', togglePauseDomain)
//
//   // set settings buttons
//   setMutationObserverKey()
//   setPauseDomainKey()
// });
//
//
// const changeName = () => {
//   const person = document.getElementById('change-name-form-text').value
//   if (person) {
//     chrome.storage.sync.set({'person': person}, chrome.tabs.reload())
//   }
// }
//
// const replaceOther = () => {
//   const input_word = document.getElementById('replace-word').value
//   const replacement = document.getElementById('replace-with').value
//   const is_case_sensitive = document.getElementById('is-case-sensitive').checked
//   if (input_word && replacement) {
//     if (document.getElementById('is-perm').checked) {
//       const obj = {}
//       obj[input_word] = replacement
//       obj[`${input_word}_case_sensitive`] = is_case_sensitive
//       chrome.storage.sync.set(obj)
//     }
//
//     chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
//       chrome.tabs.sendMessage(
//         tabs[0].id,
//         {
//           input_word: input_word,
//           replace_value: replacement,
//           case_sensitive: is_case_sensitive
//         })
//     })
//   }
// }
//
// const refreshReplacements = () => {
//   chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
//     chrome.tabs.sendMessage(
//       tabs[0].id,
//       {
//         refresh: true
//       })
//   })
// }
//
// const loadSaved = () => {
//   const list = document.getElementById('saved-items-list')
//   list.innerHTML = ''
//   chrome.storage.sync.get(null, loadSavedItemsWrapper(false))
//   chrome.storage.local.get(null, loadSavedItemsWrapper(true))
// }
//
// const loadSavedItemsWrapper = isLocal => items => loadSavedItems(items, isLocal)
//
// const loadSavedItems = (items, isLocal) => {
//   const list = document.getElementById('saved-items-list')
//   for (var key in items) {
//     if (key !== DEACTIVATE_KEY && key !== MUTATION_OBSERVER_KEY && key !== PAUSED_KEY && !key.endsWith('_case_sensitive')) {
//       const label = key === 'person' ? 'Y/N' : key
//       const case_sensitive = !!items[`${key}_case_sensitive`]
//       const case_sensitive_string = case_sensitive ? 'case sensitive' : 'not case sensitive'
//       const representative = `${label} -> ${items[key]} (${case_sensitive_string})`
//       const list_item = createListItem(key, representative, 'one-saved-item', isLocal)
//       list.appendChild(list_item)
//     }
//   }
// }
//
// const createListItem = (id, text, className, isLocal) => {
//   const text_node = document.createTextNode(text)
//   const list_node = document.createElement('LI')
//   list_node.appendChild(text_node)
//   list_node.className = className
//   list_node.id = id
//   list_node.addEventListener('click', () => {
//     if (isLocal) {
//       chrome.storage.local.remove(id)
//     } else {
//       chrome.storage.sync.remove(id)
//     }
//     list_node.className += ' strikethrough'
//   })
//   return list_node
// }
//
//
// const setDeactivateKey = () => {
//   chrome.storage.sync.get(DEACTIVATE_KEY, obj => {
//     const is_deactivated = obj[DEACTIVATE_KEY]
//     toggleDeactivateLabel(is_deactivated)
//
//     if (is_deactivated) {
//       const other_elements = document.getElementsByClassName('fade-when-deactivate')
//       const deactivate_only_elements = document.getElementsByClassName('fade-when-deactivate-only')
//       Array.from([...other_elements, ...deactivate_only_elements]).forEach(element => {
//         element.style.opacity = '0.5'
//       })
//       const input_elements = document.getElementsByTagName('INPUT')
//       Array.from(input_elements).forEach(input => {
//         if (input.id !== 'deactivate') {
//           input.disabled = 'disabled'
//         }
//       })
//     }
//   })
// }
//
// const setMutationObserverKey = () => {
//   chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => {
//     const is_enabled = obj[MUTATION_OBSERVER_KEY]
//     toggleMutationObserverLabel(is_enabled)
//   })
// }
//
// const setPauseDomainKey = () => {
//   chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
//     const hostname = new URL(tabs[0].url).hostname
//     document.getElementById('this-url').innerHTML = hostname
//
//     const storage_key = {}
//     storage_key[PAUSED_KEY] = []
//     chrome.storage.sync.get(storage_key, obj => {
//       const hostnames = obj[PAUSED_KEY]
//       const is_paused = hostnames.indexOf(hostname) !== -1
//       togglePauseDomainLabel(is_paused)
//
//       if (is_paused) {
//         const other_elements = document.getElementsByClassName('fade-when-deactivate')
//         const pause_only_other_elements = document.getElementsByClassName('fade-when-pause')
//         Array.from([...other_elements, ...pause_only_other_elements]).forEach(element => {
//           element.style.opacity = '0.5'
//         })
//         const input_elements = document.getElementsByTagName('INPUT')
//         Array.from(input_elements).forEach(input => {
//           if (input.id !== 'pause' && input.id !== 'deactivate') {
//             input.disabled = 'disabled'
//           }
//         })
//       }
//     })
//   })
// }
//
// const toggleDeactivateLabel = (isDeactivated) => {
//   document.getElementById('deactivate').checked = isDeactivated;
//
// }
//
// const toggleMutationObserverLabel = (isEnabled) => {
//   document.getElementById('enable-observer').checked = isEnabled;
// }
//
// const togglePauseDomainLabel = (isPaused) => {
//   document.getElementById('pause').checked = isPaused;
// }
//
// const toggleMutationObserver = () => {
//   chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => {
//     const was_enabled = obj[MUTATION_OBSERVER_KEY]
//
//     if (was_enabled) {
//       chrome.storage.sync.remove(MUTATION_OBSERVER_KEY)
//     } else {
//       const new_object = {}
//       new_object[MUTATION_OBSERVER_KEY] = true
//       chrome.storage.sync.set(new_object)
//     }
//
//     chrome.tabs.reload()
//   })
// }
//
// const togglePauseDomain = () => {
//   chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
//     const hostname = new URL(tabs[0].url).hostname
//
//     const storage_key = {}
//     storage_key[PAUSED_KEY] = []
//     chrome.storage.sync.get(storage_key, obj => {
//       const hostnames = obj[PAUSED_KEY]
//       const was_paused = hostnames.indexOf(hostname) !== -1
//       var new_hostnames;
//
//       if (was_paused) {
//         new_hostnames = hostnames.filter(h => h !== hostname)
//       } else {
//         new_hostnames = hostnames
//         new_hostnames.push(hostname)
//       }
//
//       const new_obj = {}
//       new_obj[PAUSED_KEY] = new_hostnames
//       chrome.storage.sync.set(new_obj)
//
//       chrome.tabs.reload()
//       window.close()
//     })
//   })
// }