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": "OrderID",
  "fieldName": "OrderID",
  "width": "80",
  "header": {
    "text": "Order ID"
  },
  "headerSummary": {
    "expression": "count"
  }
}, {
  "name": "Country",
  "fieldName": "Country",
  "width": "100",
  "header": {
    "text": "Country"
  }
}, {
  "name": "CustomerID",
  "fieldName": "CustomerID",
  "width": "90",
  "header": {
      "text": "Customer ID"
  }
}, {
  "name": "CompanyName",
  "fieldName": "CompanyName",
  "width": "150",
  "header": {
      "text": "Company Name"
  },
  "headerSummary": {
    "text": "Count: "
  }
}, {
  "name": "EmployeeID",
  "fieldName": "EmployeeID",
  "width": "90",
  "header": {
      "text": "Employee ID"
  },
}, {
  "name": "OrderDate",
  "fieldName": "OrderDate",
  "width": "130",
  "header": {
      "text": "Order Date"
  }
}, {
  "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"
  },  
  "headerSummary": {
    "text": "Total: "
  }
}, {
  "name": "Quantity",
  "fieldName": "Quantity",
  "width": "100",
  "header": {
      "text": "Quantity"
  },
  "headerSummary": {
    "expression": "sum",
    "numberFormat": "#,##0"
  },
  "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
  },
  headerSummary: {
    height: 40
  },
  onInitialized: (grid) => {
    fetch('/data/en/cellmerge_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

function btnMergeRule() {
  gridView.columnByName("OrderID").mergeRule = {criteria: "value"};
  gridView.columnByName("Country").mergeRule = {criteria: "value"};
  gridView.columnByName("CustomerID").mergeRule = {criteria: "value"};
}

function btnPrevMergeRule() {
  gridView.columnByName("OrderID").mergeRule = {criteria: "value"};
  gridView.columnByName("Country").mergeRule = {criteria: "prevvalues + value"};
  gridView.columnByName("CustomerID").mergeRule = {criteria: "prevvalues + value"};
}