/* Shows an example of a widget, with :
 * - Use of source data
 * - Use of templating
 * - Use of internationalization
 */

import helloWorldStyles from "./HelloWorld.module.css";

const HelloWorld = function (ns) {
   return class extends ns.Widgets.Widget {
    constructor(player, config) {
      super(player,config);
      console.log(
        "Calling IriSP.Widget's constructor from IriSP.HelloWorldWidget"
      );
    }

    static defaults = {
      text: "world",
    };

    static template = `<div class="Ldt-HelloWorld"><p>{{l10n.Hello}} {{text}}</p><p>Looks like we have <span class="Ldt-HelloWorld-annotations">{{source.contents.annotation.length}} annotations</span> in this feed</p></div>`;

    static messages =  {
      fr: {
        Hello: "Bonjour,",
      },
      en: {
        Hello: "Hello,",
      },
    };

    draw = function () {
      this.renderTemplate();
      console.log("HelloWorldWidget was drawn");
    };
  };
}

export { HelloWorld, helloWorldStyles};