const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Address', dataType: 'text' },
  { 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',
      exportStyleName: 'blueColor'
    }
  },
  {
    name: 'Gender',
    fieldName: 'Gender',
    width: '40',
    header: {
      text: 'Gender'
    },
    exportStyleName: 'blueColor'
  },
  {
    name: 'Age',
    fieldName: 'Age',
    width: '40',
    header: {
      text: 'Age'
    },
    styleName: 'right-column'
  },
  {
    name: 'Address',
    fieldName: 'Address',
    width: '200',
    header: {
      text: 'Address'
    },
    styleName: 'left-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'
    },
    styleName: 'right-column'
  },
  {
    name: 'SaveMaturity',
    fieldName: 'SaveMaturity',
    width: '80',
    numberFormat: '#,##0',
    header: {
      text: 'Save Maturity'
    },
    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: 50
  },
  display: {
    rowHeight: 30,
    emptyMessage: 'There is no data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.refresh();
      });
  }
}, {
  fields
});

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

function excelExport() {
  gridView.exportGrid({
    type: 'excel',
    target: 'local',
    fileName: 'gridExportSample.xlsx',
    applyDynamicStyles: true,
    done: function () {
      alert('done excel export');
    }
  });
}