const nest = require('depnest')
const { h, Value, when } = require('mutant')
const Abort = require('pull-abortable')
const pull = require('pull-stream')
const addSuggest = require('suggest-box')
const { isFeed } = require('ssb-ref')

exports.gives = nest('app.html.filter')

exports.needs = nest({
  'about.async.suggest': 'first',
  'contact.obs.following': 'first',
  'keys.sync.id': 'first'
})

exports.create = function (api) {
  return nest({
    'app.html.filter': Filter
  })

  function Filter (draw) {
    const showFilters = Value(false)

    const myId = api.keys.sync.id()
    const peopleIFollow = api.contact.obs.following(myId)
    const onlyPeopleIFollow = Value(false)
    const onlyAuthor = Value()

    const showPost = Value(true)
    const showAbout = Value(true)
    const showVote = Value(false)
    const showContact = Value(false)
    const showChannel = Value(false)
    const showPub = Value(false)

    const authorInput = h('input', {
      'ev-keyup': (ev) => {
        const author = ev.target.value
        if (author && !isFeed(author)) return

        onlyAuthor.set(author)
        draw()
      }
    })

    const filterMenu = h('Filter', [
      h('i', {
        classList: when(showFilters, 'fa fa-filter -active', 'fa fa-filter'),
        'ev-click': () => showFilters.set(!showFilters())
      }),
      h('i.fa.fa-angle-up', { 'ev-click': draw }),
      h('div', { className: when(showFilters, '', '-hidden') }, [
        h('header', [
          'Filter',
          h('i.fa.fa-filter')
        ]),
        h('section', [
          h('div.author', [
            h('label', 'Show author'),
            authorInput
          ]),
          toggle({ obs: onlyPeopleIFollow, label: 'Only people I follow' }),
          h('div.message-types', [
            h('header', 'Show messages'),
            toggle({ obs: showPost, label: 'post' }),
            toggle({ obs: showVote, label: 'like' }),
            toggle({ obs: showAbout, label: 'about' }),
            toggle({ obs: showContact, label: 'contact' }),
            toggle({ obs: showChannel, label: 'channel' }),
            toggle({ obs: showPub, label: 'pub' })
          ])
        ])
      ])
    ])

    function toggle ({ obs, label }) {
      return h('FilterToggle', {
        'ev-click': () => {
          obs.set(!obs())
          draw()
        }}, [
          h('label', label),
          h('i', { classList: when(obs, 'fa fa-check-square-o', 'fa fa-square-o') })
        ]
      )
    }

    // NOTE: suggest needs to be added after the input has a parent
    const getProfileSuggestions = api.about.async.suggest()
    addSuggest(authorInput, (inputText, cb) => {
      if (inputText[0] === '@') inputText = inputText.slice(1)
      cb(null, getProfileSuggestions(inputText))
    }, {cls: 'SuggestBox'})
    authorInput.addEventListener('suggestselect', ev => {
      authorInput.value = ev.detail.id
    })

    function followFilter (msg) {
      if (!onlyPeopleIFollow()) return true

      return Array.from(peopleIFollow()).includes(msg.value.author)
    }

    function authorFilter (msg) {
      if (!onlyAuthor()) return true

      return msg.value.author === onlyAuthor()
    }

    function messageFilter (msg) {
      switch (msg.value.content.type) {
        case 'post':
          return showPost()
        case 'vote':
          return showVote()
        case 'about':
          return showAbout()
        case 'contact':
          return showContact()
        case 'channel':
          return showChannel()
        case 'pub':
          return showPub()
        default:
          return true

      }
    }

    var downScrollAborter

    function filterDownThrough () {
      return pull(
        downScrollAborter,
        pull.filter(followFilter),
        pull.filter(authorFilter),
        pull.filter(messageFilter)
      )
    }

    var upScrollAborter

    function filterUpThrough () {
      return pull(
        upScrollAborter,
        pull.filter(followFilter),
        pull.filter(authorFilter),
        pull.filter(messageFilter)
      )
    }

    function resetFeed ({ container, content }) {
      if (typeof upScrollAborter === 'function') {
        upScrollAborter.abort()
        downScrollAborter.abort()
      }
      upScrollAborter = Abort()
      downScrollAborter = Abort()

      container.scroll(0)
      content.innerHTML = ''
    }

    return {
      filterMenu,
      filterDownThrough,
      filterUpThrough,
      resetFeed
    }
  }
}