import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import get from 'lodash/get';
import pick from 'lodash/pick';

import "./main.html";
import { Meteor } from "meteor/meteor";
import {
  MeteorClientMethodSender,
  TrivialStrategy,
  ClientLogger,
  BrowserProcessor,
} from "filog";

Template.hello.onCreated(function helloOnCreated() {
  // counter starts at 0
  this.counter = new ReactiveVar(0);
});

Template.hello.helpers({
  counter() {
    return Template.instance().counter.get();
  },
});

Template.hello.events({
  'click button'(event, instance) {
    // increment the counter when button is clicked
    instance.counter.set(instance.counter.get() + 1);
  },
});

class ExtendedBrowserProcessor extends BrowserProcessor {

  constructor(browserInfo) {
    super();
    this.browserInfo = pick(browserInfo, ['description', 'name', 'version', 'layout', 'os']);
  }

  process(context) {
    const result = super.process(context);
    return {
      ...result,
      browser: {
        ...result.browser,
        ...this.browserInfo,
      },
      sockJSProtocol: get(Meteor.connection, '_stream.socket.protocol', 'unknown'),
    };
  }

}

Meteor.startup(() => {
  const sender = new MeteorClientMethodSender();
  const strategy = new TrivialStrategy(sender);
  let logger = new ClientLogger(strategy);
  logger.processors.push(
    new ExtendedBrowserProcessor({}),
    new BrowserProcessor(),
  );
  window.logger = logger;
});