const nest = require('depnest')
const { h, map, computed, when } = require('mutant')

exports.gives = nest('contact.html.relationships')

exports.needs = nest({
  about: {
    'html.image': 'first',
    'obs.name': 'first'
  },
  contact: {
    async: {
      follow: 'first',
      unfollow: 'first'
    },
    obs: {
      followers: 'first',
      following: 'first'
    }
  },
  'keys.sync.id': 'first'
})

exports.create = function (api) {
  return nest({
    'contact.html.relationships': relationships
  })

  function relationships (id) {
    var rawFollowing = api.contact.obs.following(id)
    var rawFollowers = api.contact.obs.followers(id)

    var friends = computed([rawFollowing, rawFollowers], (following, followers) => {
      return [...following].filter(follow => followers.has(follow))
    })
    var following = computed([rawFollowing, friends], (following, friends) => {
      return [...following].filter(follow => !friends.includes(follow))
    })
    var followers = computed([rawFollowers, friends], (followers, friends) => {
      return [...followers].filter(follower => !friends.includes(follower))
    })

    var myId = api.keys.sync.id()
    var ImFollowing = api.contact.obs.following(myId)
    var IFollowThem = computed([ImFollowing], ImFollowing => ImFollowing.has(id))
    var theyFollowMe = computed([rawFollowing], following => following.has(myId))

    var relationshipStatus = computed([IFollowThem, theyFollowMe], (IFollowThem, theyFollowMe) => {
      return IFollowThem && theyFollowMe ? '- you are friends'
        : IFollowThem ? '- you follow them'
        : theyFollowMe ? '- they follow you'
        : ''
    })

    function imageLink (id) {
      return h('a',
        { href: id, title: computed(api.about.obs.name(id), name => '@' + name) },
        api.about.html.image(id)
      )
    }

    return h('Relationships', [
      h('header', 'Relationships'),
      when(id !== myId, 
        h('div.your-status', [
          h('header', 'Your status'),
          h('section.action', [
            when(ImFollowing.sync, 
              when(IFollowThem, 
                h('button', { 'ev-click': api.contact.async.unfollow }, 'Unfollow'),
                h('button', { 'ev-click': api.contact.async.follow }, 'Follow')
              ),
              h('button', { disabled: 'disabled' }, 'Loading...')
            ),
          ]),
          when(ImFollowing.sync, h('section.status', relationshipStatus))
        ])
      ),
      h('div.friends', [
        h('header', 'Friends'),
        h('section', map(friends, imageLink))
      ]),
      h('div.follows', [
        h('header', 'Follows'),
        h('section', map(following, imageLink))
      ]),
      h('div.followers', [
        h('header', 'Followers'),
        h('section', map(followers, imageLink))
      ])
    ])
  }
}