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" },
    summaries: [
      { text: "Total ==>  " },
      { text: "Average ==>  " }
    ],
    summaryUserSpans: [{ colspan: 3 }, { colspan: 3 }]
  },
  { 
    name: "CompanyName", 
    fieldName: "CompanyName", 
    width: "120", 
    header: { text: "Company Name" }
  },
  { 
    name: "QuantityPerUnit", 
    fieldName: "QuantityPerUnit", 
    width: "100", 
    header: { text: "Quantity / Unit", styleName: "orange-column" }
  },
  { 
    name: "Quantity", 
    fieldName: "Quantity", 
    width: "100", 
    header: { text: "Quantity", styleName: "orange-column" },
    summaries: [
      { expression: "sum", numberFormat: "#,##0.00" },
      { expression: "avg", numberFormat: "#,##0.00" }
    ]
  },
  { name: "OrderID", fieldName: "OrderID", width: "80", header: { text: "Order ID" } },
  { name: "CustomerID", fieldName: "CustomerID", width: "90", header: { text: "Customer ID" } },
  { 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" } }
];

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) => {
    gridView.setHeaderSummaries({
      visible: true,
      items: [
        { height: 40 },
        { height: 40 }
      ]
    });

    const layout = [
      {
        column: "Country",
        summaryUserSpans: [{ colspan: 3 }, { colspan: 3 }]
      },
      "CompanyName",
      "QuantityPerUnit", 
      "Quantity",
      "OrderID",
      "CustomerID",
      "EmployeeID",
      "OrderDate",
      "Phone",
      "ProductName"
    ];
    
    gridView.setColumnLayout(layout);
    
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        dataProvider.setRows(data);
      });
  }
}, {
  fields
});

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