const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Color', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Email', dataType: 'text' }
];

const columns = [
  { name: 'col1', fieldName: 'KorName', header: { text: 'Name' }, width: 150 },
  { name: 'col2', fieldName: 'Gender', header: { text: 'Gender' }, width: 150 },
  { 
    name: 'col3', 
    fieldName: 'Color', 
    header: { text: 'colorPicker', styleName: 'orange-column' }, 
    width: 150, 
    renderer: 'custom_renderer', 
    styleName: 'picker-renderer', 
    editable: false 
  },
  { name: 'col4', fieldName: 'Age', header: { text: 'Age' }, width: 150, numberFormat: '##' },
  { name: 'col5', fieldName: 'Email', header: { text: 'Email' }, width: 150 }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 25
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data2.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.getDataSource().setRowCount(20);
        grid.refresh();
      });
  }
}, {
  fields
});

gridView.registerCustomRenderer('custom_renderer', {
  initContent: function(parent) {
    var input = this._input = document.createElement('input');
    input.type = 'text';
    input.setAttribute('data-swatches', '#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e');
    parent.appendChild(input);
  },
  render: function(grid, model, width, height, info) {
    var topItem = gridView.getTopItem();
    var pickerPosition = model.index.itemIndex < topItem + 5 ? 'bottom' : 'top left';
    
    var input = this._input;
    if (window.$ && window.$.fn && window.$.fn.minicolors) {
      window.$(input).minicolors && window.$(input).minicolors({
        control: window.$(input).attr('data-control') || 'hue',
        defaultValue: window.$(input).attr('data-defaultValue') || '',
        format: window.$(input).attr('data-format') || 'hex',
        keywords: window.$(input).attr('data-keywords') || '',
        inline: window.$(input).attr('data-inline') === 'true',
        letterCase: window.$(input).attr('data-letterCase') || 'lowercase',
        opacity: window.$(input).attr('data-opacity'),
        position: window.$(input).attr('data-position') || pickerPosition,
        swatches: window.$(input).attr('data-swatches') ? window.$(input).attr('data-swatches').split('|') : [],
        change: function(hex, opacity) {
          if (!hex) {
            return;
          }
          var index = gridView.getIndexOfElement(this);
          if (index) {
            var itemIndex = index.itemIndex;
            gridView.setValue(itemIndex, index.fieldIndex, hex);
          }
        },
        show: function() {
        }
      });
    }
    
    if (model.value != null) {
      this._input.value = model.value;
      if (window.$ && window.$.fn && window.$.fn.minicolors) {
        window.$(this._input).minicolors('value', model.value);
      }
    } else {
      if (window.$ && window.$.fn && window.$.fn.minicolors) {
        window.$(this._input).minicolors('value', null);
      }
    }
  },
  clearContent: function(parent) {
    if (window.$ && window.$.fn && window.$.fn.minicolors) {
      window.$(this._input).minicolors('destroy');
    }
    parent.innerHTML = '';
  }
});

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