const { ipcRenderer } = require('electron')
const items = require('./items')

let showModal = document.getElementById('show-modal'),
    closeModal = document.getElementById('close-modal'),
    modal = document.getElementById('modal'),
    addItem = document.getElementById('add-item'),
    itemUrl = document.getElementById('url'),
    search = document.getElementById('search')

// Filter items with "search"
search.addEventListener('keyup', e => {

  // Loop items
  Array.from( document.getElementsByClassName('read-item') ).forEach( item => {

    // Hide items that don't match search value
    let hasMatch = item.innerText.toLowerCase().includes(search.value)
    item.style.display = hasMatch ? 'flex' : 'none'
  })
})

// Navigate item selection with up/down arrows
document.addEventListener('keydown', e => {
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
    items.changeSelection(e.key)
  }
})

const toggleModalButtons = () => {
  if (addItem.disabled === true) {
    addItem.disabled = false
    addItem.style.opacity = 1
    addItem.innerText = '添加'
    closeModal.style.display = 'inline'
  } else {
    addItem.disabled = true
    addItem.style.opacity = 0.5
    addItem.innerText = '添加中...'
    closeModal.style.display = 'none'
  }
}

showModal.addEventListener('click', e => {
  modal.style.display = 'flex'
})

closeModal.addEventListener('click', e => {
  modal.style.display = 'none'
})

addItem.addEventListener('click', e => {
  if (itemUrl.value) {
    ipcRenderer.send('new-item', itemUrl.value)
    toggleModalButtons()
  }
})

// Listen for new item from main process
ipcRenderer.on('new-item-success', (e, newItem) => {
  
  // Add new item to "items" node
  items.addItem(newItem, true)

  // Enable buttons
  toggleModalButtons()

  // Hide modal and clear value
  modal.style.display = 'none'
  itemUrl.value = ''
})

// Listen for keyboard submit
itemUrl.addEventListener('keyup', e => {
  if( e.key === 'Enter' ) addItem.click()
})