const fields = [
  { fieldName: "icon", dataType: "number" },
  { fieldName: "col0", dataType: "text" },
  { fieldName: "col1", dataType: "number" },
  { fieldName: "col2", dataType: "number" },
  { fieldName: "col3", dataType: "number" },
  { fieldName: "col4", dataType: "number" },
  { fieldName: "col5", dataType: "number" },
  { fieldName: "col6", dataType: "number" },
  { fieldName: "col7", dataType: "number" }
];

const columns = [
  { name: "col0", fieldName: "col0", type: "data", width: "150", header: { text: "Type" } },
  { name: "col1", fieldName: "col1", type: "data", width: "80", numberFormat: "#,##0", header: { text: "Agriculture/Forestry/Fishery" } },
  { name: "col2", fieldName: "col2", type: "data", width: "75", numberFormat: "#,##0", header: { text: "Mining" } },
  { name: "col3", fieldName: "col3", type: "data", width: "75", numberFormat: "#,##0", header: { text: "Manufacturing" } },
  { name: "col4", fieldName: "col4", type: "data", width: "80", numberFormat: "#,##0", header: { text: "Construction" } },
  { name: "col5", fieldName: "col5", type: "data", width: "130", numberFormat: "#,##0", header: { text: "Wholesale/Retail, Consumer Goods" } },
  { name: "col6", fieldName: "col6", type: "data", width: "90", numberFormat: "#,##0", header: { text: "Food/Lodging" } },
  { name: "col7", fieldName: "col7", type: "data", width: "120", numberFormat: "#,##0", header: { text: "Transport, Warehousing, Telecom" } }
];

const { treeView, dataProvider } = RealGrid.createTree("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (tree) => {
    fetch('/data/en/treedata.json')
      .then(response => response.json())
      .then(data => {
        tree.getDataSource().setObjectRows(data, "rows", "", "");
        tree.expandAll();
      });
  }
}, {
  fields
});

treeView.editOptions.movable = true;
treeView.dataDropOptions.callback = function (source, sourceItems, target, targetItem) {
  var rowIds = source.getRowsOfItems(sourceItems);

  if(sourceItems[0] > targetItem){
    if(source.getModel(sourceItems[0]).parentId != target.getModel(targetItem).parentId ){
      targetItem = targetItem - 1;
    }
  }
 
  var sourceParentId = source.getModel(sourceItems[0]).parentId;
  var targetParentId = target.getModel(targetItem).parentId;

  var targetRowId = source.getDataRow(targetItem);
  var targetParentRow = dataProvider.getParent(targetRowId);

  if (sourceParentId === targetParentId) {
    var startIndex = source.getModel(sourceItems[0], true).childIndex;
    var endIndex = target.getModel(targetItem, true).childIndex;
    for (var i = 0; i < rowIds.length; i++) {
      dataProvider.moveRowSibling(rowIds[i], endIndex - startIndex);
    }
  } else {
    var targetLevel = dataProvider.getLevel(targetRowId);
    for (var i = 0; i < rowIds.length; i++) {
      var sourceLevel = dataProvider.getLevel(rowIds[i]);
      if (sourceLevel === targetLevel) {
        dataProvider.changeRowParent(rowIds[i], targetParentRow, target.getModel(targetItem, true).childIndex + 1);
      }else if(sourceLevel -1 === targetLevel){
        if(target.getModel(targetItem, true).expanded){
          dataProvider.changeRowParent(rowIds[i], targetRowId, 0);
        }
      }
    }
  }
};

window.treeView = treeView;
window.dataProvider = dataProvider;