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', header: { text: 'Country' } },
  { name: 'CompanyName', fieldName: 'CompanyName', type: 'data', width: '120', header: { text: 'CompanyName' } },
  { name: 'OrderID', fieldName: 'OrderID', type: 'data', width: '80', header: { text: 'Order ID' } },
  { name: 'CustomerID', fieldName: 'CustomerID', type: 'data', width: '90', header: { text: 'Customer ID' } },
  { name: 'EmployeeID', fieldName: 'EmployeeID', type: 'data', width: '90', header: { text: 'Employee ID' } },
  { name: 'OrderDate', fieldName: 'OrderDate', type: 'data', width: '130', header: { text: 'Order Date' } },
  { name: 'Phone', fieldName: 'Phone', type: 'data', width: '100', header: { text: 'Phone' } },
  { name: 'ProductName', fieldName: 'ProductName', type: 'data', width: '200', header: { text: 'Product Name' } },
  { name: 'QuantityPerUnit', fieldName: 'QuantityPerUnit', type: 'data', width: '100', header: { text: 'Quantity / Unit' }, numberFormat: '#,##0' },
  { name: 'Quantity', fieldName: 'Quantity', type: 'data', width: '100', header: { text: 'Quantity' }, numberFormat: '#,##0' },
  { name: 'UnitPrice', fieldName: 'UnitPrice', type: 'data', width: '100', header: { text: 'Unit Price' }, numberFormat: '#,##0' }
];

var layout;

function getMultiLevelColumns(colNames) {
  function leastCommonMultiple(arr) {
    function gcd(a, b) {
      while (b != 0) {
        var temp = a % b;
        a = b;
        b = temp;
      }
      return a;
    }

    function lcm(a, b) {
      return a * b / gcd(a, b);
    }

    var result = lcm(arr[0], arr[1]);
    for (var i = 2; i < arr.length; i++) {
      result = lcm(result, arr[i]);
    }
    return result;
  }

  var arrLen = colNames.map(function (x) { return x.length });
  var lcmValue = leastCommonMultiple(arrLen);

  var parentGrpColObj = {};
  parentGrpColObj.direction = 'vertical';
  parentGrpColObj.items = [];
  parentGrpColObj.header = { visible: false };

  for (var i = 0; i < colNames.length; i++) {
    var grpColObj = {};
    grpColObj.direction = 'horizontal';
    grpColObj.items = [];
    grpColObj.header = { visible: false };

    for (var j = 0; j < colNames[i].length; j++) {
      var cellSpan = lcmValue / colNames[i].length;
      var column = {};

      column.column = colNames[i][j];
      column.cellSpan = cellSpan;
      column.width = 50;

      grpColObj.items.push(column);
      for (var k = 0; k < cellSpan - 1; k++) {
        grpColObj.items.push(50);
      }
    }
    parentGrpColObj.items.push(grpColObj);
  }

  return [parentGrpColObj];
}

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: -1
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    layout = getMultiLevelColumns([['Country', 'CompanyName'], ['CustomerID', 'OrderDate', 'OrderID']]);
    grid.setColumnLayout(layout);

    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

window.fitStyle = function() {
  gridView.displayOptions.fitStyle = 'even';
};

window.linearizeColumns = function() {
  gridView.linearizeColumns();
};

window.setColumnlayout = function() {
  gridView.setColumnLayout(layout);
};