var fields = [{
  "fieldName": "OrderID",
  "dataType": "text"
},
{
  "fieldName": "CustomerID",
  "dataType": "text"
},
{
  "fieldName": "EmployeeID",
  "dataType": "text"
},
{
  "fieldName": "Time",
},
{
  "fieldName": "CompanyName",
  "dataType": "text"
},
{
  "fieldName": "Country",
  "dataType": "text"
},
{
  "fieldName": "Phone",
  "dataType": "text"
},
{
  "fieldName": "ProductName",
  "dataType": "text"
},
{
  "fieldName": "QuantityPerUnit",
  "dataType": "text"
},
{
  "fieldName": "Quantity",
  "dataType": "number"
},
{
  "fieldName": "UnitPrice",
  "dataType": "number"
}];

var columns = [{
  "name": "Country",
  "fieldName": "Country",
  "width": "100",
  "header": {
      "text": "Country"
  }
}, {
  "name": "CompanyName",
  "fieldName": "CompanyName",
  "width": "120",
  "header": {
      "text": "Company Name"
  }
}, {
  "name": "Time",
  "fieldName": "Time",
  "width": "150",
  "header": {
    "text": "Time",
    "styleName": "orange-column"
  }, 
  "editor": {
    "mask": {
      "definitions": {
          "b": "[0-2]",
          "c": "[0-9]",
          "d": "[0-5]",
          "e": "[0-9]"
      },
      "editMask": "bc:de",
      "includedFormat": true,                
      "overWrite": true, 
      "allowEmpty": true
    }
  },
  "textFormat": "([0-9]{2})([0-9]{2});$1:$2"
}, {
  "name": "EmployeeID",
  "fieldName": "EmployeeID",
  "width": "90",
  "header": {
      "text": "Employee ID"
  },
}, {
  "name": "Phone",
  "fieldName": "Phone",
  "width": "90",
  "renderer": {
      "type": "button"
  },
  "header": {
      "text": "Phone"
  }
}, {
  "name": "ProductName",
  "fieldName": "ProductName",
  "width": "200",
  "header": {
      "text": "Product Name"
  }
}, {
  "name": "QuantityPerUnit",
  "fieldName": "QuantityPerUnit",
  "width": "100",
  "header": {
      "text": "Quantity / Unit"
  }
}, {
  "name": "Quantity",
  "fieldName": "Quantity",
  "width": "100",
  "header": {
      "text": "Quantity"
  },
  "footer": {
      "expression": "sum",
      "numberFormat": "#,##0"
  }
}, {
  "name": "UnitPrice",
  "fieldName": "UnitPrice",
  "width": "100",
  "header": {
      "text": "Unit Price"
  },
  "footer": {
      "expression": "avg",
      "numberFormat": "#,##0.00"
  }
}];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().fillJsonData(data, {count: 10});
        
        grid.setValue(0, "Time", "00:32");
        grid.setValue(1, "Time", "11:11");
        grid.setValue(2, "Time", "12:42");
        grid.setValue(3, "Time", "06:12");
        grid.setValue(4, "Time", "02:14");
        grid.setValue(5, "Time", "00:42");
        grid.setValue(6, "Time", "10:12");
        grid.setValue(7, "Time", "18:16");
        grid.setValue(8, "Time", "03:17");
        grid.setValue(9, "Time", "23:48");
        
        grid.refresh();
      });
  }
}, {
  fields
});

gridView.onGetEditValue = function (grid, index, editResult) {
  if(index.fieldName === "Time"){
    var time = editResult.value.substring(0,2);
    if(Number(time) >= 24){
      editResult.value = "";
    }
  }
};

window.gridView = gridView;
window.dataProvider = dataProvider;