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"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "50",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "50",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    },
    footer: {
      text: "Total =>"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    },
    footer: {
      text: "Total",
      expression: "sum",
      groupExpression: "sum"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.refresh();
        grid.orderBy(['KorName']);
        grid.setFocus();
      });
  }
}, {
  fields
});

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

function getValue() {
  var current = gridView.getCurrent();
  var value = dataProvider.getValue(current.dataRow, current.fieldName);
  alert(
    "dataRow: " +
      current.dataRow +
      "\n" +
      "field: " +
      current.fieldName +
      "\n" +
      "value: " +
      value
  );
}

function getValues() {
  var current = gridView.getCurrent();
  alert(
    "dataRow: " + current.dataRow + "\n" + dataProvider.getValues(current.dataRow)
  );
}

function getJsonRow() {
  var current = gridView.getCurrent();
  var jsonData = dataProvider.getJsonRow(current.dataRow);
  alert("dataRow: " + current.dataRow + "\n" + JSON.stringify(jsonData));
}

function getOutputRow() {
  var options = { datetimeFormat: "yyyy-MM-dd" };
  var current = gridView.getCurrent();
  var outputRowData = dataProvider.getOutputRow(options, current.dataRow);
  alert("dataRow: " + current.dataRow + "\n" + JSON.stringify(outputRowData))
}

function getRows() {
  alert(dataProvider.getRows(0, -1));
}

function getJsonRows() {
  alert(JSON.stringify(dataProvider.getJsonRows(0, -1)));
}

function getFieldValues() {
  var current = gridView.getCurrent();
  alert(
    "field: " +
      current.fieldName +
      "\n" +
      "fieldValues: " +
      dataProvider.getFieldValues(current.fieldName, 0, -1)
  );
}

function getOutputRows() {
  var options = { datetimeFormat: "yyyy-MM-dd" };
  alert(JSON.stringify(dataProvider.getOutputRows(options, 0, -1)))
}