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: "Monetary",
    fieldName: "Monetary",
    width: "200",
    values: ["EUR", "USD", "HKD", "KRW"],
    labels: ["EUR", "USD", "HKD", "KRW"],
    editable: false,
    renderer: {
      type: "html",
      callback: function(grid, cell, w, h) {
        var str = "";
        var data = (cell.value && cell.value.split(",")) || [];
        var labels = cell.dataColumn.labels;
        var values = cell.dataColumn.values;
        for (var i = 0; i < labels.length; i++) {
          var checked = data.indexOf(values[i]) >= 0 ? "checked": "";
          str = str + "<input type='checkbox' value = '"+values[i]+"'" + checked  + " onclick='javascript:valuecheck("+cell.index.dataRow+", event)' >"+labels[i];
        }
        return str;
      }
    },
    header: { text: "Currency", styleName: "orange-column" }
  },
  { 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", styleName: "right-column", header: { text: "Phone" } },
  { name: "ProductId", fieldName: "ProductId", width: "120", styleName: "right-column", header: { text: "Product ID" } },
  { name: "KorCountry", fieldName: "KorCountry", width: "100", styleName: "right-column", 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: "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" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "70", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "120", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", 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 },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        dataProvider.setValue(3, "Monetary", "USD,KRW");
        dataProvider.setValue(4, "Monetary", "EUR,USD,KRW");
        dataProvider.setValue(6, "Monetary", "EUR,USD,HKD,KRW");
        grid.refresh();
      });
  }
}, { fields });

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

window.valuecheck = function(dataRow, event) {
  var target = event.target;
  var value = target.value;
  if(dataProvider.getValue(dataRow, "Monetary")){
    var dataValue = dataProvider.getValue(dataRow, "Monetary").split(",");
    var idx = dataValue.indexOf(value);
    if (target.checked) {
      if (idx < 0) {
        dataValue.push(value);
      }
    } else {
      if (idx >= 0)
        dataValue.splice(idx, 1);
    }
    dataProvider.setValue(dataRow, "Monetary", dataValue.join(","));
  } else {
    dataProvider.setValue(dataRow, "Monetary", value);
  }
};