const fields = [{
  "fieldName": "OrderID",
  "dataType": "text"
},
{
  "fieldName": "CustomerID",
  "dataType": "text"
},
{
  "fieldName": "EmployeeID",
  "dataType": "text"
},
{
  "fieldName": "OrderDate",
  "dataType": "datetime",
  "datetimeFormat": "yyyy-MM-dd",
  "amText": "AM",
  "pmText": "PM"
},
{
  "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"
}];

const columns = [{
  "name": "Country",
  "fieldName": "Country",
  "width": "100",
  "header": {
    "text": "Country"
  }
}, {
  "name": "CompanyName",
  "fieldName": "CompanyName",
  "width": "120",
  "header": {
    "text": "Company Name"
  }
}, {
  "name": "OrderID",
  "fieldName": "OrderID",
  "width": "150",
  "header": {
    "text": "Regex",
    "styleName": "orange-column"
  }, 
  "editor": {
    "mask": {
      "editMask": "0000-0000-0000-0000"
    }
  },
  "textFormat": "([0-9]{4})([0-9]{4})([0-9]{4})([0-9]{4});$1-$2-$3-$4"
}, {
  "name": "OrderID1",
  "fieldName": "OrderID",
  "width": "150",
  "header": {
    "text": "displayCallback",
    "styleName": "orange-column"
  }, 
  "editor": {
    "mask": {
      "editMask": "0000-0000-0000-0000"
    }
  },
  "displayCallback": function(grid, index, value) {
    var tmp = '';
    tmp += value.substr(0, 4);
    tmp += '-';
    tmp += value.substr(4, 4);
    tmp += '-****-****';

    return tmp;
  }
}, {
  "name": "OrderDate",
  "fieldName": "OrderDate",
  "width": "130",
  "header": {
    "text": "Order Date"
  }
}, {
  "name": "CustomerID",
  "fieldName": "CustomerID",
  "width": "90",
  "header": {
    "text": "Customer ID"
  }
}, {
  "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."
  },
  stateBar: {
    visible: false
  },
  footer: {
    height: 40
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data.slice(0, 10));
        
        grid.setValue(0, "OrderID", "4017956479311942");
        grid.setValue(1, "OrderID", "3537454864902429");
        grid.setValue(2, "OrderID", "3574848246092110");
        grid.setValue(3, "OrderID", "3571523163079340");
        grid.setValue(4, "OrderID", "3746227853102431");
        grid.setValue(5, "OrderID", "5602245880215027");
        grid.setValue(6, "OrderID", "6709735293733863");
        grid.setValue(7, "OrderID", "3573722642979827");
        grid.setValue(8, "OrderID", "6759123799705660");
        grid.setValue(9, "OrderID", "2016571419050795");
      });
  }
}, {
  fields
});

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