let manager, dataProvider, gridView;

const GridManager = (dp, gv) => {
  if (!dp || !gv) throw new Error('DataProvider and GridView objects are required.');

  const provider = dp;
  const viewer = gv;

  viewer.setDataSource(provider);

  return {
    getNewFieldName: function(fieldName) {
      let newFieldName = fieldName.replace(' ', '_');
      const index = provider.getFieldIndex(newFieldName);

      if (index === -1) return newFieldName;
      return this.getNewFieldName(newFieldName.concat('1'));
    },
    hasColumns: function() {
      return viewer.getColumns().length > 0 && provider.getFields().length > 0;
    },
    hasData: function() {
      return provider.getRowCount() > 0;
    },
    _checkData: function() {
      if (this.hasColumns() && !this.hasData()) {
        provider.setRowCount(10);
      }
    },
    addColumn: function(colName, valueType, editor, renderer) {
      const fieldName = this.getNewFieldName(colName);
      provider.addField({ 
        fieldName: fieldName,
        dataType: valueType,
      });
      
      viewer.addColumn({
        name: fieldName,
        fieldName: fieldName,
        width: 130,
        header: {
          text: colName,
        },
        editor: editor,
        renderer: renderer,
      });

      this._checkData();

      return fieldName;
    },
  };
};

dataProvider = new RealGrid.LocalDataProvider();
gridView = new RealGrid.GridView('realgrid');
gridView.setDataSource(dataProvider);
gridView.displayOptions.emptyMessage = 'No data to display.';

manager = new GridManager(dataProvider, gridView);

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

function onClickBtnAddTextColumn() {
  const fieldName = manager.addColumn('TEXT Column', 'text', { type: 'line' });
  dataProvider.setValue(1, fieldName, 'Text Value');
}

function onClickBtnAddNumberColumn() {
  const fieldName = manager.addColumn('NUMBER Column', 'number', {
    type: 'number',
    positiveOnly: true,
  });
  dataProvider.setValue(1, fieldName, 710708);
}

function onClickBtnAddDateColumn() {
  const fieldName = manager.addColumn('DATETIME Column', 'datetime', {
    type: 'date',
    maxLength: 6,
    yearNavigation: true,
  });
  dataProvider.setValue(1, fieldName, '2020.07.08');
}

function onClickBtnAddDropdownColumn() {
  const fieldName = manager.addColumn('DROPDOWN Column', 'text', {
    type: 'list',
    values: ['Value1', 'Value2', 'Value3'],
    labels: ['Value is 1', 'Value is 2', 'Value is 3'],
    displayLabels: 'valueLabel',
    textReadOnly: true
  });
  dataProvider.setValue(1, fieldName, 'Value2');
}

function onClickBtnAddBooleanColumn() {
  const fieldName = manager.addColumn('BOOLEAN Column', 'boolean', undefined, {
    type: 'check',
    trueValues: 'true',
    falseValues: 'false',
  });
  dataProvider.setValue(1, fieldName, true);
}

function onClickBtnAddObjectColumn() {
  const fieldName = manager.addColumn('Object Column', 'object', { type: 'line' }, {
    type: 'html',
    callback: function(grid, cell, w, h) {
      const p = cell.value;
      console.log(p);
      if (p && p.from && p.to) {
        p.rendom = p.rendom || Math.floor(Math.random() * (p.to - p.from) + p.from);
        cell.value = p;
        return p.rendom;
      }

      return '';
    },
  });
  dataProvider.setValue(1, fieldName, { from: 100, to: 250 });
}