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', type: 'data', width: '100', styles: { textAlignment: 'center' }, header: { text: 'Country' } },
  { name: 'CompanyName', fieldName: 'CompanyName', type: 'data', width: '120', styleName: 'blue-column', styles: { textAlignment: 'near' }, header: { text: 'Company Name' } },
  { name: 'UnitPrice2', fieldName: 'UnitPrice', type: 'data', width: '100', renderer: { type: 'bar', origin: 'left', barWidth: '80%' }, header: { text: 'UnitPrice2' }, footer: { expression: 'sum', styles: { textAlignment: 'far', numberFormat: '#,000' } } },
  { name: 'OrderID', fieldName: 'OrderID', type: 'data', width: '80', styles: { textAlignment: 'center' }, header: { text: 'Order ID' }, footer: { expression: 'max', groupExpression: 'max' } },
  { name: 'CustomerID', fieldName: 'CustomerID', type: 'data', width: '90', styles: { textAlignment: 'center' }, header: { text: 'Customer ID' } },
  { name: 'EmployeeID', fieldName: 'EmployeeID', type: 'data', width: '90', styles: { textAlignment: 'center' }, header: { text: 'Employee ID' }, footer: { expression: 'min', groupExpression: 'min' } },
  { name: 'OrderDate', fieldName: 'OrderDate', type: 'data', width: '130', styles: { textAlignment: 'center' }, header: { text: 'Order Date' } },
  { name: 'Phone', fieldName: 'Phone', type: 'data', width: '90', renderer: { type: 'button' }, header: { text: 'Button' } },
  { name: 'Phone2', fieldName: 'Phone', type: 'data', width: '90', styles: { textAlignment: 'near' }, header: { text: 'Phone2' } },
  { name: 'ProductName', fieldName: 'ProductName', type: 'data', width: '200', styles: { textAlignment: 'near' }, header: { text: 'Product Name' } },
  { name: 'QuantityPerUnit', fieldName: 'QuantityPerUnit', type: 'data', width: '100', styles: { textAlignment: 'near' }, header: { text: 'Quantity / Unit' } },
  { name: 'Quantity', fieldName: 'Quantity', type: 'data', width: '100', styles: { textAlignment: 'far' }, header: { text: 'Quantity' }, footer: { expression: 'sum', styles: { textAlignment: 'far', numberFormat: '#,000' } } },
  { name: 'UnitPrice', fieldName: 'UnitPrice', type: 'data', width: '100', styles: { textAlignment: 'far' }, header: { text: 'Unit Price' }, footer: { expression: 'avg', groupExpression: 'max', styles: { textAlignment: 'far', numberFormat: '0.00', prefix: 'AVG = ' } } },
  { name: 'Country2', fieldName: 'Country', type: 'data', width: '100', styles: { textAlignment: 'center' }, header: { text: 'Country2' } }
];

const layout = [
  {
    name: 'Group1',
    direction: 'horizontal',
    items: [
      {
        name: 'OrderID',
        items: ['OrderID'],
        header: { visible: false }
      },
      {
        name: 'CustomerID',
        items: ['CustomerID'],
        header: { visible: false }
      }
    ],
    header: { text: 'Group1', rows: 2 } // rows: 2 demonstrates vertical header merging
  },
  {
    name: 'Group2',
    direction: 'horizontal',
    items: [
      {
        name: 'Group3',
        items: ['Country', 'OrderDate']
      },
      {
        name: 'Group4',
        items: ['EmployeeID', 'Phone']
      }
    ],
    header: { text: 'Group2' }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: -1
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  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.setColumnLayout(layout);
      });
  }
}, {
  fields
});

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