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" } },
  { name: "Gender", fieldName: "Gender", width: "40", header: { text: "Gender" } },
  { name: "Age", fieldName: "Age", width: "40", header: { text: "Age" }, styleName: "right-column" },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "150",
    renderer: "renderer_imgbtn",
    styleName: "left-column custom_renderer",
    header: { text: "Investment Country", styleName: "orange-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 ID" } },
  { 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" }, 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: 50, emptyMessage: 'No data to display.' },
  edit: { insertable: true, appendable: true },
  footer: { height: 40 },
  stateBar: { width: 16 },
  onInitialized: (grid) => {
    grid.registerCustomRenderer("renderer_imgbtn", {
      initContent : function (parent) {
        var span = this._span = document.createElement("span");
        span.className = "custom_render_span"
        parent.appendChild(span);
        parent.appendChild(this._button1 = document.createElement("span"));
        parent.appendChild(this._button2 = document.createElement("span"));
      },

      canClick : function() {
        return true;
      },

      clearContent : function(parent) {
        console.log("DISPOSED......");
        parent.innerHTML = "";
      },

      render : function(grid, model, width, height, info) {
        info = info || {};
        var span = this._span;
        span.textContent = model.value;

        this._value = model.value;
        this._button1.className = "";
        this._button2.className = "";
        switch(model.value) {
          case "Mozambique":
            this._button1.className = "custom_search custom-hover" + (info.focused ? " custom-focused" : "");
            this._button2.className = "custom_popup custom-hover" + (info.focused ? " custom-focused" : "");
            break;
          case "Canada":
            this._button1.className = "custom_search custom-hover" + (info.focused ? " custom-focused" : "");
            break;
          case "Bouvet Island":
            this._button2.className = "custom_popup custom-hover" + (info.focused ? " custom-focused" : "");
            break;
        }
      },

      click : function(event) {
        var grid = this.grid.handler;
        var index = this.index.toProxy();
        event.preventDefault();

        if (event.target === this._button1) {
          alert("Query Button: " + this._value);
        } else if (event.target === this._button2) {
          alert("Popup Button: " + this._value);
        } 
      }
    });

    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.refresh();
      });
  }
}, { fields });

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