const fields = [
  { fieldName: 'area1name', dataType: 'text' },
  { fieldName: 'area2name', dataType: 'text' },
  { fieldName: 'area3name', dataType: 'text' },
  { fieldName: 'area3code', dataType: 'text' }
];

const columns = [
  { name: 'area1name', fieldName: 'area1name', width: '80', header: { text: 'Province/City' }, autoFilter: true },
  { name: 'area2name', fieldName: 'area2name', width: '120', header: { text: 'District' }, autoFilter: true },
  { name: 'area3name', fieldName: 'area3name', width: '140', header: { text: 'Town' }, autoFilter: true },
  { name: 'area3code', fieldName: 'area3code', width: '120', header: { text: 'Town Code' }, autoFilter: true }
];

function setSelectorDataOrder(order) {
  gridView.filteringOptions.automating.selectorDataOrder = order;
  document.getElementById('currentOrder').textContent = order;
}

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  filteringOptions: {
    automating: {
      filteredDataOnly: true,
      selectorDataOrder: 'none'
    }
  },
  onInitialized: (grid) => {
    fetch('/data/areacodes_all.json')
      .then(response => response.json())
      .then(json => {
        grid.getDataSource().setRows(json);
      });
  }
}, {
  fields
});

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