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" },
    headerSummary: { text: "count / 2 = " }
  },
  { 
    name: "OrderID", 
    fieldName: "OrderID", 
    width: "80", 
    header: { text: "Order ID", styleName: "orange-column" },
    headerSummary: {
      valueCallback: function (grid, column, childIndex, summary, value) {
        return grid.getSummary("OrderID", "count") / 2;
      }
    }
  },
  { name: "CustomerID", fieldName: "CustomerID", width: "90", header: { text: "Customer ID" } },
  { 
    name: "QuantityPerUnit", 
    fieldName: "QuantityPerUnit", 
    width: "100", 
    header: { text: "Quantity / Unit" },
    headerSummary: { text: "Check Total: " }
  },
  { 
    name: "Quantity", 
    fieldName: "Quantity", 
    width: "100", 
    header: { text: "Quantity", styleName: "orange-column" },
    headerSummary: {
      numberFormat: "#,##0.#",
      valueCallback: function (grid, column, childIndex, summary, value) {
        var prod = grid.getDataSource();
        var checkedRows = grid.getCheckedRows();
        var sum = 0;
        checkedRows.forEach(function(e) {
          sum += prod.getValue(e, column.fieldName);
        });
        return sum;
      }
    },
    footer: { expression: "sum", numberFormat: "#,##0" }
  },
  { 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: "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
  },
  checkBar: {
    visible: true
  },
  headerSummary: {
    height: 40
  },
  headerSummaries: {
    visible: true
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        dataProvider.setRows(data);
      });
  }
}, {
  fields
});

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