RealGrid.setLocale('en');

const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CardNumber', dataType: 'text' },
  { fieldName: 'Monetary', dataType: 'text' },
  { fieldName: 'StartDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'EndDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'Year', dataType: 'number' },
  { fieldName: 'InterestRate', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
  { fieldName: 'SaveMaturity', dataType: 'number' },
  { fieldName: 'CurrentSave', dataType: 'number' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' }, styleName: 'right-column' },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product Code' } },
  { name: 'KorCountry', fieldName: 'KorCountry', width: '100', header: { text: 'Country' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '100', header: { text: 'Order Date' } },
  { name: 'CardNumber', fieldName: 'CardNumber', width: '140', header: { text: 'Card No.' } },
  { name: 'Monetary', fieldName: 'Monetary', width: '40', header: { text: 'Monetary' } },
  { name: 'StartDate', fieldName: 'StartDate', width: '100', header: { text: 'Start Date' } },
  { name: 'EndDate', fieldName: 'EndDate', width: '100', header: { text: 'End Date' } },
  { name: 'ToMonth', fieldName: 'ToMonth', width: '50', header: { text: 'Pay Cnt.' }, styleName: 'right-column' },
  { name: 'Month', fieldName: 'Month', width: '50', header: { text: 'Residuum' }, styleName: 'right-column' },
  { name: 'InterestRate', fieldName: 'InterestRate', width: '50', numberFormat: '0.00', header: { text: 'Interest Rate' }, styleName: 'right-column' },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '80', numberFormat: '#,##0', header: { text: 'Payment' }, footer: { text: 'Total =>' }, styleName: 'right-column' },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '80', numberFormat: '#,##0', header: { text: 'Save Maturity' }, footer: { text: 'Total', expression: 'sum', groupExpression: 'sum' }, styleName: 'right-column' },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Currency Save' }, styleName: 'right-column' }
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: { height: 40 },
  display: { rowHeight: 36, emptyMessage: 'There is no data to display.' },
  edit: { insertable: true, appendable: true },
  footer: { height: 40 },
  stateBar: { width: 16 },
  groupPanel: { visible: true },
  onInitialized: (grid) => {
    fetch('/data/en/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

function btnGetModel() {
  const extended = document.getElementById('chkExtendedModel').checked;
  const itemIndex = gridView.getCurrent().itemIndex;
  const item = gridView.getModel(itemIndex, extended);
  alert(JSON.stringify(item));
}

function btnGetParentModel() {
  const extended = document.getElementById('chkExtendedModel').checked;
  const idx = gridView.getCurrent();
  const item = gridView.getModel(idx.itemIndex);
  const parent = gridView.getParentModel(item, extended);
  alert(JSON.stringify(item));
  if (parent) {
    idx.itemIndex = parent.itemIndex;
    gridView.setCurrent(idx);
  }
}

function btnGetRootModel() {
  const extended = document.getElementById('chkExtendedModel').checked;
  const idx = gridView.getCurrent();
  const item = gridView.getModel(idx.itemIndex);
  const root = gridView.getRootModel(item, extended);
  alert(JSON.stringify(root));
  if (root) {
    idx.itemIndex = root.itemIndex;
    gridView.setCurrent(idx);
  }
}

function btnGetChildModels() {
  const extended = document.getElementById('chkExtendedModel').checked;
  const itemIndex = gridView.getCurrent().itemIndex;
  const item = gridView.getModel(itemIndex);
  if (item) {
    const children = gridView.getChildModels(item, extended);
    alert(JSON.stringify(children));
  }
}

function btnGetChildModel() {
  const extended = document.getElementById('chkExtendedModel').checked;
  const itemIndex = gridView.getCurrent().itemIndex;
  const group = gridView.getModelAs(itemIndex, 'group');
  if (group && group.count > 0) {
    const item = gridView.getChildModel(group, 0, extended);
    alert(JSON.stringify(item));
  }
}

function btnGetModels() {
  const extended = document.getElementById('chkExtendedModel').checked;
  const items = gridView.getModels([0, 1, 2], extended);
  alert(JSON.stringify(items));
}

function btnGetModelOfRow() {
  const extended = document.getElementById('chkExtendedModel').checked;
  const row = gridView.getCurrent().dataRow;
  const item = gridView.getModelOfRow(row, extended);
  alert(JSON.stringify(item));
}

function btnGetModelsOfRows() {
  const extended = document.getElementById('chkExtendedModel').checked;
  const items = gridView.getModelsOfRows([0, 1, 2], extended);
  alert(JSON.stringify(items));
}

function btnGetGroupSummary() {
  const idx = gridView.getCurrent();
  const item = gridView.getModelAs(idx.itemIndex, 'row');

  if (item) {
    const group = gridView.getParentModel(item);

    if (group && idx.fieldIndex >= 0) {
      const summary = gridView.getGroupSummary(group, idx.fieldIndex);
      if (summary) {
        alert(JSON.stringify(summary));
      }
    }
  }
}

function btnExpandModel() {
  const recursive = false;
  const force = false;
  const itemIndex = gridView.getCurrent().itemIndex;
  const group = gridView.getModelAs(itemIndex, 'group');
  if (group) {
    gridView.expandModel(group, recursive, force);
  }
}

function btnCollapseModel() {
  const recursive = false;
  const itemIndex = gridView.getCurrent().itemIndex;
  const group = gridView.getModelAs(itemIndex, 'group');
  if (group) {
    gridView.collapseModel(group, recursive);
  }
}