const nest = require('depnest')
const isBlog = require('scuttle-blog/isBlog')
const { h, Value, computed, when, resolve } = require('mutant')


exports.gives = nest('message.html', {
  canRender: true,
  render: true
})

exports.needs = nest({
  'about.obs.color': 'first',
  'app.navigate': 'first',
  'blob.sync.url': 'first',
  'message.html.decorate': 'reduce',
  'message.html.layout': 'first',
  'message.html.markdown': 'first',
  'sbot.obs.connection': 'first'
})

exports.create = function (api) {

  return nest('message.html', {
    render: blogRenderer,
    canRender
  })

  return nest('message.html.render', blogRenderer)

  function blogRenderer (msg, opts) {
    if (!canRender(msg)) return

    var content = null

    // only render the message body if it is available (only in thread view), otherwise show card
    if (msg.body) {
      content = h('BlogFull.Markdown', [
        h('h1', msg.value.content.title),
        api.message.html.markdown(msg.body)
      ])
    } else {
      content = BlogCard({
        blog: msg.value.content,
        onClick: () => api.app.navigate(msg.key),
        color: api.about.obs.color,
        blobUrl: api.blob.sync.url
      })
    }
    
    const element = api.message.html.layout(msg, Object.assign({}, {
      content,
      layout: 'default'
    }, opts))

    return api.message.html.decorate(element, { msg })
  }
}

function BlogCard ({ blog, blobUrl, onClick, color }) {
  const thumbnail = when(blog.thumbnail,
    h('Thumbnail', {
      style: {
        'background-image': `url("${blobUrl(resolve(blog.thumbnail))}")`,
        'background-position': 'center',
        'background-size': 'cover'
      }
    }),
    h('Thumbnail -empty', {
      style: { 'background-color': color(blog.title) }
    }, [
      h('i.fa.fa-file-text-o')
    ])
  )

  var b = h('BlogCard', { 'ev-click': onClick }, [
    // h('div.context', [
    //   api.about.html.avatar(author, 'tiny'),
    //   h('div.name', api.about.obs.name(author)),
    //   api.message.html.timeago(blog)
    // ]),
    h('div.content', [
      thumbnail,
      h('div.text.Markdown', [
        h('h1', blog.title),
        // when(blog.channel, api.message.html.channel(blog.channel))
        h('div.summary', blog.summary),
        h('div.read', 'Read blog')
      ])
    ])
  ])

  return b
}

function canRender (msg) {
  return msg.value && msg.value.content && msg.value.content.type === 'blog' && isBlog(msg)
}