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: 'QuantityPerUnit',
    fieldName: 'QuantityPerUnit',
    width: '100',
    header: { text: 'Quantity / Unit', styleName: 'orange-column' },
    footers: [
      { text: 'Total ==>  ', styleName: 'orange-column' },
      { text: 'Average ==>  ', styleName: 'orange-column' }
    ]
  },
  {
    name: 'Quantity',
    fieldName: 'Quantity',
    width: '100',
    header: { text: 'Quantity', styleName: 'orange-column' },
    footers: [
      { expression: 'sum', numberFormat: '#,##0.00', styleName: 'orange-column' },
      { expression: 'avg', numberFormat: '#,##0.00', styleName: 'orange-column' }
    ]
  },
  { 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' } },
  { name: 'UnitPrice', fieldName: 'UnitPrice', width: '100', header: { text: 'Unit Price' } }
];

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().setRows(data);
        grid.setFooters({
          visible: true,
          items: [{ height: 40 }, { height: 40 }]
        });
      });
  }
}, {
  fields
});

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