var 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'
  }
];

var columns = [
  {
    name: 'OrderID',
    fieldName: 'OrderID',
    width: '90',
    textInputCase: 'upper',
    header: {
      text: 'Text editor'
    }
  },
  {
    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: 'CustomerID',
    fieldName: 'CustomerID',
    width: '150',
    sortable: false,
    lookupDisplay: true,
    values: [
      'VINET',
      'HANAR',
      'SUPRD',
      'VICTE',
      'THREE',
      'SEVEN'
    ],
    labels: [
      '<VINET>',
      '<HANAR>',
      '<SUPRD>',
      '<VICTE>',
      '<THREE>',
      '<SEVEN>'
    ],
    editor: {
      type: 'dropdown',
      dropDownCount: 4
    },
    header: {
      text: 'DropDown Edit'
    }
  },
  {
    name: 'CustomerID2',
    fieldName: 'CustomerID',
    width: '150',
    sortable: false,
    editor: {
      type: 'dropdown',
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        'VINET',
        'HANAR',
        'SUPRD',
        'VICTE',
        'THREE',
        'SEVEN'
      ],
      labels: [
        '<VINET>',
        '<HANAR>',
        '<SUPRD>',
        '<VICTE>',
        '<THREE>',
        '<SEVEN>'
      ]
    },
    header: {
      text: 'Domain Only'
    }
  },
  {
    name: 'CustomerID3',
    fieldName: 'CustomerID',
    width: '150',
    sortable: false,
    editor: {
      type: 'search',
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: 'Search Editor '
    }
  },
  {
    name: 'CountryKor',
    fieldName: 'Country',
    width: '150',
    sortable: false,
    lookupDisplay: true,
    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: 'partialMatch'
    }
  },
  {
    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'
    },
    renderer: {
      type: 'button'
    }
  },
  {
    name: 'Phone',
    fieldName: 'Phone',
    width: '100',
    header: {
      text: 'Phone'
    }
  },
  {
    name: 'ProductName',
    fieldName: 'ProductName',
    width: '200',
    header: {
      text: 'Product Name'
    }
  }
];

var events = 0;
var 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'
];

function addLog(log) {
  var eventLog = document.getElementById('eventLog');
  var prevLog = eventLog.value;
  eventLog.value = prevLog + '[' + events++ + '] ' + log + '\n';
  eventLog.scrollTop = eventLog.scrollHeight;
}

function btnClearTextarea() {
  events = 0;
  document.getElementById('eventLog').value = '';
}

var result = RealGrid.createGrid('realgrid', {
  columns: columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    grid.onEditSearch = function (grid, index, text) {
      addLog('onEditSearch:' + index.itemIndex + ',' + index.column + ', ' + text);
      var items = CustomerNames.filter(function (str) {
        return str.indexOf(text) === 0;
      });
      addLog(items.join(', '));
      grid.fillEditSearchItems(index.column, text, items);
    };

    grid.onCellClicked = function (grid, clickData) {
      addLog('onCellClicked: ' + JSON.stringify(clickData));
    };

    grid.onCellDblClicked = function (grid, clickData) {
      addLog('onCellDblClicked: ' + JSON.stringify(clickData));
    };

    grid.onCellItemClicked = function (grid, index, clickData) {
      addLog('onCellItemClicked: ' + JSON.stringify(clickData));
      return true;
    };

    grid.onItemAllChecked = function (grid, checked) {
      addLog('onItemAllChecked: ' + checked);
    };

    grid.onItemChecked = function (grid, itemIndex, checked) {
      addLog('onItemChecked: ' + checked + ' at ' + itemIndex);
    };

    grid.onItemsChecked = function (grid, items, checked) {
      addLog('onItemsChecked: ' + items.join() + ' are checked as ' + checked);
    };

    grid.onSearchCellButtonClick = function (grid, index, text) {
      addLog('onSearchCellButtonClick: button was clicked!');
    };

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

var gridView = result.gridView;
var dataProvider = result.dataProvider;

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