const fields = [
  { fieldName: 'Domestic/Import' },
  { fieldName: 'Country' },
  { fieldName: 'Brand Number' },
  { fieldName: 'Brand Name' },
  { fieldName: 'Model Number' },
  { fieldName: 'Model Name' },
  { fieldName: 'Color Number' },
  { fieldName: 'Color' },
  { fieldName: 'Sale Date', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd' },
  { fieldName: 'Sale Quantity', dataType: 'number' },
  { fieldName: 'Vehicle Price', dataType: 'number' },
  { fieldName: 'Vehicle Type' },
  { fieldName: 'Fuel' }
];

const columns = [
  { name: 'Domestic/Import', fieldName: 'Domestic/Import', width: 100, header: { text: 'Domestic/Import' } },
  { name: 'Country', fieldName: 'Country', width: 70, header: { text: 'Country' } },
  { name: 'Brand Number', fieldName: 'Brand Number', width: 70, header: { text: 'Brand Number' }, styles: { numberFormat: '#,##0', textAlignment: 'far' } },
  { name: 'Brand Name', fieldName: 'Brand Name', width: 100, header: { text: 'Brand Name' } },
  { name: 'Model Number', fieldName: 'Model Number', width: 70, header: { text: 'Model Number' }, styles: { numberFormat: '#,##0', textAlignment: 'far' } },
  { name: 'Model Name', fieldName: 'Model Name', width: 150, header: { text: 'Model Name' } },
  { name: 'Color Number', fieldName: 'Color Number', width: 70, header: { text: 'Color Number' }, styles: { numberFormat: '#,##0', textAlignment: 'far' } },
  { name: 'Color', fieldName: 'Color', width: 100, header: { text: 'Color' } },
  { name: 'Sale Date', fieldName: 'Sale Date', width: 100, header: { text: 'Sale Date' } },
  { name: 'Sale Quantity', fieldName: 'Sale Quantity', width: 70, header: { text: 'Sale Quantity' }, styles: { numberFormat: '#,##0', textAlignment: 'far' } },
  { name: 'Vehicle Price', fieldName: 'Vehicle Price', width: 100, header: { text: 'Vehicle Price' }, styles: { numberFormat: '#,##0', textAlignment: 'far' } },
  { name: 'Vehicle Type', fieldName: 'Vehicle Type', width: 100, header: { text: 'Vehicle Type' } },
  { name: 'Fuel', fieldName: 'Fuel', width: 100, header: { text: 'Fuel' } }
];

const { gridView: masterGrid, dataProvider: masterProvider } = RealGrid.createGrid('realgrid_master', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true,
    exitGridWhenTab: 'grid'
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 10
  }
}, {
  fields
});

const { gridView: detailGrid, dataProvider: detailProvider } = RealGrid.createGrid('realgrid_detail', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true,
    exitGridWhenTab: 'grid'
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 10
  },
  onInitialized: (grid) => {
    fetch('/data/en/pivotDataSet.json')
      .then(response => response.json())
      .then(data => {
        masterProvider.setRows(data);
        detailProvider.setRows(data);
      });
  }
}, {
  fields
});

masterGrid.onTopIndexChanged = function (grid, idx) {
  detailGrid.setTopItem(idx);
};

detailGrid.onTopIndexChanged = function (grid, idx) {
  masterGrid.setTopItem(idx);
};

masterGrid.onLeftPosChanged = function (grid, pos) {
  detailGrid.setLeftPos(pos);
};

detailGrid.onLeftPosChanged = function (grid, pos) {
  masterGrid.setLeftPos(pos);
};

window.masterGrid = masterGrid;
window.masterProvider = masterProvider;
window.detailGrid = detailGrid;
window.detailProvider = detailProvider;