/*jshint esnext: true */

// Create client instance

const client = new Circuit.Client({

  domain: jsBinTpl.domain,       // read domain from url

  client_id: jsBinTpl.client_id, // get client_id for domain

  scope: 'ALL'

});  

// Template for Circuit JSBin examples. Builds generic part of page incl. login button.

const {logonButton, logoutButton, print} = jsBinTpl.init(client, template, {

  title: 'Circuit JS SDK: Moderate & EnableGuestAccess on conversation',

  description: 'Retrieve 10 most recent conversations, display them and allow functions on them such as disable guest access, moderate etc..',

  apiMethods: ['getConversations', 'getConversationDetails', 'moderateConversation', 'unmoderateConversation', 'enableGuestAccess', 'disableGuestAccess'],

  prerequisites: ['None']

});

​

// Local variables

var _conversations;

​

logonButton.addEventListener('click', () => {

  client.logon()

  .then(user => print(`Successfully authenticated as ${user.displayName}`))

  .then(getConversations)

  .then(getConversationDetails)

  .then(render)

  .catch(print);

}); 

​

logoutButton.addEventListener('click', () => {

  client.logout()

  .catch(print);

});

function getConversations() {

  return client.getConversations({numberOfConversations: 10})

  .then(convs => {

      _conversations = convs.reverse();

      render();

  });

}

​

function getConversationDetails() {

  return Promise.all(_conversations.map(c => client.getConversationDetails(c.convId)))

  .then(res => {

    for (let i = 0; i < res.length; i++) {

      _conversations[i].details = res[i];

    }

  }); 

}

​

function render() {

  hyperHTML.bind(document.querySelector('#main'))`

    <div class="wrapper">

      ${_conversations.map(c => hyperHTML.wire(c)`

        <div>

          <div>${c.title}</div> 

        </div>

        <div>

          <button onclick="${e => toggleGuestAccess(e, c)}">${c.isGuestAccessDisabled ? 'Turn on Guest Access' : 'Turn off Guest Access'}</button>

        </div>

        <div>

          <button onclick="${e => toggleModeration(e, c)}" disabled="${!c.details || !c.details.isModerationAllowed}">${c.isModerated ? 'Turn off Moderation' : 'Turn on Moderation'}</button>

        </div>

      `)}

    </div>

  `;  

}

function toggleGuestAccess(evt, conv) {

  let fn = conv.isGuestAccessDisabled ? client.enableGuestAccess : client.disableGuestAccess;

  fn(conv.convId)

    .then(render)

    .catch(print);  

} 

function toggleModeration(evt, conv) {

  let fn = conv.isModerated ? client.unmoderateConversation : client.moderateConversation;

  fn(conv.convId)

    .then(render)

    .catch(print);

} 

​

client.addEventListener('conversationUpdated', evt => {

  let idx = _conversations.findIndex(c => c.convId === evt.conversation.convId);

  if (idx >= 0) {

    evt.conversation.details = _conversations[idx].details;

    _conversations[idx] = evt.conversation;

    render();

  }

}); 

// Setup conversation injector (async) so all conversations returned in any API

// will contain a title attribute which is either the diplayName of a

// direct conversation peer, the topic of a group conversation (if given),

// or a list of the first 5 members firstnames

Circuit.Injectors.conversationInjector = conv => {

  return new Promise((resolve, reject) => {

    if (conv.topic) {

      conv.title = conv.topic;

      resolve(conv);

      return;

    }

    let userIds = conv.participants.slice(0, 5).filter(p => {

      return p !== client.loggedOnUser.userId;

    });

    client.getUsersById(userIds)

    .then(users => {

      if (conv.type === Circuit.Enums.ConversationType.DIRECT) {

        conv.title = users[0].displayName;

      } else {

        conv.title = users.map(u => {

          return u.firstName;

        }).join(', ');

      }

      resolve(conv);

    })

    .catch(reject);

  });

}

​