// Get the spell json based on choosen language defaultLanguage

var jsonsource = "".concat(
  "../data/spells/spells-grimoire-",
  $.defaultLanguage.slice(0, 2),
  ".json"
);
var alldata;
// Fetch data from server
fetch(jsonsource)
  .then((response) => response.json())
  .then((data) => {
    // load fetched data into grid
    alldata = data.spell;
    console.log(alldata);

    //document.getElementById("spell-list")
    var grid = $("#spell-list").w2grid({
      name: "Spells",
      box: "#spellgrid",
      show: {
        header: false,
        toolbar: true,
        footer: false,
        /* selectColumn: true, */
      },
      multiSelect: true,
      liveSearch: true,
      multiSearch: true,
      fixedBody: false,
      records: alldata,
      columns: [
        {
          field: "name",
          text: "Name",
          sortable: true,
          resizable: true,
          searchable: { operator: "contains" },
        },
        {
          field: "source",
          text: "Source",
          sortable: true,
          tooltip: "Which book is this from ?",
          searchable: { operator: "contains" },
          render(record, extra) {
            return (
              '<a href="http://w2ui.com" target="_blank" title="Click Me!"><u>' +
              extra.value +
              "</u></a>"
            );
          },
        },
        { field: "page", text: "Page", sortable: true },
        { field: "level", text: "Level", sortable: true, size: 65 },
        { field: "school", text: "School", sortable: true },
        {
          field: "components",
          text: '<span data-localize="gridColumns.components">Components</span>',
          render(record) {
            var v = record.components.v
              ? '<span data-localize="verbal">V</span>'
              : "";
            var s = record.components.s ? '<span data-localize="somatic">S</span>' : "";
            var m = record.components.m ? '<span data-localize="material">M</span>' : "";
            //var m = record.components.m ? record.components.m : "";
            var vs=v.concat(', ',s);
            return vs.concat(', ',m);
            if ((record.components.v = true)) {
              console.log(record.components);
            }
          },
        },
        { field: "duration", text: "Duration" },
      ],
      async onSelect(event) {
        await event.complete;
        console.log("select", event.detail, this.getSelection());
      },
      onClick(event) {
        let record = this.get(event.detail.recid);
        //grid2.clear()
        /*grid2.add([
            { recid: 0, name: 'ID:', value: record.recid },
            { recid: 1, name: 'First Name:', value: record.fname },
            { recid: 2, name: 'Last Name:', value: record.lname },
            { recid: 3, name: 'Email:', value: record.email },
            { recid: 4, name: 'Date:', value: record.sdate }
        ])*/
        console.log(record);
      },
       async onRefresh(event) {
         await event.complete;
          console.log("Le tableau est généré et le DOM est modifié.");
          $("[data-localize]").localize("main", { pathPrefix: "lang" }); // mettre votre script ici
         }
        
      })
    });