const nest = require('depnest')
const { h, Value, computed, map, when, resolve } = require('mutant')
const pull = require('pull-stream')

exports.gives = nest('app.page.channelShow')

exports.needs = nest({
  'app.html.sideNav': 'first',
  'app.html.topNav': 'first',
  'app.html.scroller': 'first',
  'app.html.blogCard': 'first',
  'channel.obs.recent': 'first',
  'feed.pull.channel': 'first',
  'history.sync.push': 'first',
  'keys.sync.id': 'first',
  'translations.sync.strings': 'first',
  'channel.obs.subscribed': 'first',
  'channel.async.subscribe': 'first',
  'channel.async.unsubscribe': 'first',
  'channel.obs.isSubscribedTo': 'first'
})

exports.create = (api) => {
  return nest('app.page.channelShow', channelShow)

  function channelShow(location) {
    
    var strings = api.translations.sync.strings()
    const myId = api.keys.sync.id()
    const { subscribed } = api.channel.obs
    const { subscribe, unsubscribe } = api.channel.async
    const { isSubscribedTo } = api.channel.obs
    const youSubscribe = isSubscribedTo(location.channel, myId)

    var searchVal = resolve(location.channel)
  

    
    createStream = api.feed.pull.channel(location.channel)
    

    const prepend = [
      api.app.html.topNav(location),
      h('section.about', [
        h('h1', location.channel),
        h('div.actions', [
          when(youSubscribe,
            h('Button', { 'ev-click': () => subscribe(location.channel) }, strings.channelShow.action.unsubscribe),
            h('Button', { 'ev-click': () => unsubscribe(location.channel) }, strings.channelShow.action.subscribe)
          )
        ])
      ]),
    ]

    var channelPosts = api.app.html.scroller({
      classList: ['content'],
      prepend,
      stream: createStream,
      filter: () => pull(
        pull.filter(msg => {
          const type = msg.value.content.type
          return type === 'post' || type === 'blog'
        }),
        pull.filter(msg => !msg.value.content.root) // show only root messages
      ),
      // FUTURE : if we need better perf, we can add a persistent cache. At the moment this page is fast enough though.
      // See implementation of app.html.sideNav for example
      // store: recentMsgCache,
      // updateTop: updateRecentMsgCache,
      // updateBottom: updateRecentMsgCache,
      render
    })

    return h('Page -channelShow', { title: strings.home }, [
      api.app.html.sideNav(location),
      channelPosts
    ])
  }


  function render(blog) {
    const { recps, channel } = blog.value.content
    var onClick
    if (channel && !recps)
      onClick = (ev) => api.history.sync.push(Object.assign({}, blog, { page: 'blogShow' }))

    return api.app.html.blogCard(blog, { onClick })
  }
}