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 ID" } },
  { 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 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: "Installment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, 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 Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

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) => {
    const xmlData = '<rows>\
      <row KorName= "박영호" Gender= "남" Age= "71" Phone= "(025)6563-2802" ProductId= "198160731-00008" KorCountry= "모잠비크" OrderDate= "2021-01-16" CardNumber= "5587-2139-9692-3644" Monetary= "EUR" StartDate= "2018-02-25" EndDate= "2021-08-12" ToMonth= "23" Month= "41" Year= "3" InterestRate= "0.15" SaveCost= "51000" SaveMaturity= "14950650" CurrentSave= "9304950"  Rating= "5" BusinessProficiency= "59" Address= "서울특별시 강서구 공항동 45-89"/>\
      <row KorName= "조일형" Gender= "남" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "캐나다" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= "0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "서울특별시 중구 봉래동2가 122" />\
    </rows>';
    
    grid.getDataSource().fillXmlData(xmlData, { fillMode: "set" });
  }
}, {
  fields
});

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

function updateData() {
  const xmlData = '<rows>\
    <row KorName= "박영호" Gender= "남" Age= "71" Phone= "(025)6563-2802" ProductId= "198160731-00008" KorCountry= "모잠비크" OrderDate= "2021-01-16" CardNumber= "5587-2139-9692-3644" Monetary= "EUR" StartDate= "2018-02-25" EndDate= "2021-08-12" ToMonth= "23" Month= "41" Year= "3" InterestRate= "0.15" SaveCost= "51000" SaveMaturity= "14950650" CurrentSave= "9304950"  Rating= "5" BusinessProficiency= "59" Address= "서울특별시 강서구 공항동 45-89"/>\
    <row KorName= "조일형" Gender= "남" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "캐나다" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= "0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "서울특별시 중구 봉래동2가 122" />\
  </rows>';

  dataProvider.fillXmlData(xmlData, { 
    fillMode: "update",
    start: 1,
    count: 1,
    fillPos: 0 
  });
}

window.updateData = updateData;