var h = require('../h')

//var blob_url = require('../plugs').first(exports.blob_url = [])

exports.needs = {
  blob_url: 'first'
}

exports.gives = {
  mcss: true,
  message_content: true
}

var mcss = `
  About {
    background-color: red
  }
`

exports.create = function (api) {
  return { 
    message_content,
    mcss: function () { return mcss }
  }

  function message_content (msg) {
    if(msg.value.content.type !== 'about') return

    var about = msg.value.content
    var { about: aboutId, name, image, description } = about

    // if(!image && !name) return

    return h('.About', {}, [
      verb({ aboutId, authorId: msg.value.author }),
      profile({ aboutId, name, image, description })
    ])
  }
}


function verb ({ aboutId, authorId }) {
  return authorId === aboutId
    ? h('span', 'self-identifies as')
    : h('span', ['identifies ', idLink(aboutId), ' as '])
}

function profile ({ aboutId, name, image, description }) {
  return h('div', [
    name
      ? h('a', {href:'#'+aboutId}, name)
      : null,
    image
      ? h('a', {href:'#'+aboutId}, h('img.avatar--fullsize', {src: api.blob_url(image)}))
      : null,
    description || null
  ])
}

function idLink (id) {
  return h('a', {href:'#'+id}, id)
}

function asLink (ln) {
  return typeof ln === 'string' ? ln : ln.link
}


@@ -216,29 +216,87 @@
     
-background-color: red
+display: flex%0A    flex-wrap: wrap%0A%0A    header %7B%0A      margin-right: .4rem%0A    %7D
 %0A  %7D
@@ -644,18 +644,33 @@
  h('
-.
+div', %7BclassName: '
 About'
-, %7B
 %7D, %5B
@@ -772,16 +772,21 @@
 cription
+, api
  %7D)%0A    
@@ -838,22 +838,29 @@
  %7D) %7B%0A  
-return
+var content =
  authorI
@@ -878,26 +878,16 @@
 Id%0A    ?
- h('span',
  'self-i
@@ -903,25 +903,14 @@
  as'
-)
 %0A    :
- h('span',
  %5B'i
@@ -947,11 +947,40 @@
 ' as
- 
 '%5D
+%0A%0A  return h('header', content
 )%0A%7D%0A
@@ -1033,16 +1033,21 @@
 cription
+, api
  %7D) %7B%0A  
@@ -1293,24 +1293,48 @@
 Link (id) %7B%0A
+  if (!id) return null%0A%0A
   return h('
@@ -1354,16 +1354,35 @@
 +id%7D, id
+.slice(0,9) + '...'
 )%0A%7D%0A%0Afun

add actual styling to About widget, small bugfixes