const fields = [
  { fieldName: "Country" },
  { fieldName: "Currency" },
  { fieldName: "CountryCode" }
];

const columns = [
  {
    name: "Country",
    fieldName: "Country",
    width: "150",
    lookupDisplay: true,
    editButtonVisibility: "always",
    editor: {
      type: "list",
      listCallback: function(grid, index) {
        return {
          value: "value",
          label: "label",
          list: [
            { value: "Korea", label: "Korea", flag: "KR", country: "Korea", currency: "KRW" },
            { value: "USA", label: "USA", flag: "US", country: "USA", currency: "USD" },
            { value: "Brazil", label: "Brazil", flag: "BR", country: "Brazil", currency: "BRL" },
            { value: "Argentina", label: "Argentina", flag: "AR", country: "Argentina", currency: "ARS" },
            { value: "China", label: "China", flag: "CN", country: "China", currency: "CNY" },
            { value: "Japan", label: "Japan", flag: "JP", country: "Japan", currency: "JPY" }
          ]
        };
      },
      templateCallback: function(grid, index, div, value, label, item) {
        div.innerHTML = `<span style='width:100px'>value: ${value}</span>
                         <span style='width:100px'>, label: ${label}</span>`;
      }
    },
    header: { text: "Country" }
  },
  {
    name: "Currency",
    fieldName: "Currency",
    header: { text: "Currency" }
  },
  {
    name: "CountryCode",
    fieldName: "CountryCode",
    header: { text: "Country Code" }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: { height: 40 },
  display: { rowHeight: 36, emptyMessage: "No data to display." },
  footer: { height: 40 },
  stateBar: { width: 16 },
  edit: { insertable: true, appendable: true },
  onGetEditValue: (grid, index, result) => {
    if (index.column === "Country" && result["item"]) {
      grid.setValue(index.itemIndex, "Currency", result["item"].currency);
      grid.setValue(index.itemIndex, "CountryCode", result["item"].flag);
    }
  },
  onInitialized: (grid) => {
    grid.getDataSource().setRows([
      { Country: "Korea", Currency: "KRW", CountryCode: "KR" },
      { Country: "USA", Currency: "USD", CountryCode: "US" },
      { Country: "Brazil", Currency: "BRL", CountryCode: "BR" },
      { Country: "Argentina", Currency: "ARS", CountryCode: "AR" },
      { Country: "Korea", Currency: "KRW", CountryCode: "KR" },
      { Country: "USA", Currency: "USD", CountryCode: "US" },
      { Country: "Brazil", Currency: "BRL", CountryCode: "BR" },
      { Country: "Argentina", Currency: "ARS", CountryCode: "AR" },
      { Country: "Korea", Currency: "KRW", CountryCode: "KR" },
      { Country: "USA", Currency: "USD", CountryCode: "US" },
      { Country: "Brazil", Currency: "BRL", CountryCode: "BR" },
      { Country: "Argentina", Currency: "ARS", CountryCode: "AR" }
    ]);
  }
}, {
  fields
});

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