const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat:"yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "CountryRaw",
    fieldName: "Country",
    width: "150",
    sortable: false,
    header: {
      text: "Raw Data",
      styleName: "orange-column"
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "always",
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "column.values, labels",
      styleName: "orange-column"
    }
  },
  {
    name: "CountryKor2",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "always",
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 5,
      values: [
        "Brazil",
        "Germany"
      ],
      labels: [
        "Brazil",
        "Germany"
      ]
    },
    header: {
      text: "editor.values, labels",
      styleName: "orange-column"
    }
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.##",
      multipleChar: "+"
    },
    header: {
      text: "Number Edit"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

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
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.refresh();
      });
  }
}, {
  fields
});

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