const fields = [
  {
    fieldName: "OrderDate",
    dataType: "datetime"
  },
  {
    fieldName: "dateTime1"
  },
  {
    fieldName: "dateTime2"
  },
  {
    fieldName: "dateTime3"
  }
];

const columns = [
  {
    name: "dateTime1",
    fieldName: "dateTime1",
    width: "110",
    header: {
      text: "yyyyMM"
    },
    editor: {
      type: "btdate",
      btOptions: {
        startView: 1,
        minViewMode: 1,
        todayBtn: "linked",
        language: "ko",
        todayHighlight: true
      },
      datetimeFormat: "yyyyMM",
      textReadOnly: true,
      mask: {
        editMask: "999999"
      }
    }
  },
  {
    name: "dateTime2",
    fieldName: "dateTime2",
    width: "110",
    header: {
      text: "yyyy-MM"
    },
    editor: {
      type: "btdate",
      btOptions: {
        startView: 1,
        minViewMode: 1,
        todayBtn: "linked",
        language: "ko",
        todayHighlight: true
      },
      textReadOnly: true,
      datetimeFormat: "yyyy-MM",
      mask: {
        editMask: "9999-99",
        includedFormat: true
      }
    }
  },
  {
    name: "dateTime3",
    fieldName: "dateTime3",
    width: "160",
    header: {
      text: "yyyyMM -> yyyy-MM"
    },
    textFormat: "([0-9]{4})([0-9]{2})$;$1-$2",
    editor: {
      type: "btdate",
      btOptions: {
        startView: 1,
        minViewMode: 1,
        todayBtn: "linked",
        language: "ko",
        todayHighlight: true
      },
      datetimeFormat: "yyyyMM",
      textReadOnly: true,
      mask: {
        editMask: "9999-99"
      }
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    type: "data",
    width: "130",
    header: {
      text: "Order Date"
    }
  }
];

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) => {
    const sampleData = [
      ["2019-01-01", "201901", "2019-01", "201901"],
      ["2019-01-01", "201901", "2019-01", "201901"],
      ["2019-01-01", "201901", "2019-01", "201901"],
      ["2019-01-01", "201901", "2019-01", "201901"],
      ["2019-01-01", "201901", "2019-01", "201901"],
      ["2019-01-01", "201901", "2019-01", "201901"]
    ];
    grid.getDataSource().setRows(sampleData);
    gridView.refresh();
  }
}, {
  fields
});

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