const fields = [
  { fieldName: "area1code", dataType: "text" },
  { fieldName: "area1name", dataType: "text" },
  { fieldName: "area2code", dataType: "text" },
  { fieldName: "area2name", dataType: "text" },
  { fieldName: "area3code", dataType: "text" },
  { fieldName: "area3name", dataType: "text" },
  { fieldName: "treeId", dataType: "text" },
  { fieldName: "treeName", dataType: "text" },
  { fieldName: "iconControl", dataType: "text" }
];

const columns = [
  { fieldName: "treeName", name: "treeName", width: 150, header: { text: "Region Name" } },
  { fieldName: "treeId", name: "treeId", header: { text: "TreeID" } },
  { fieldName: "area1code", name: "area1code", header: { text: "Province Code" } },
  { fieldName: "area1name", name: "area1name", header: { text: "Province Name" } },
  { fieldName: "area2code", name: "area2code", header: { text: "City/District Code" } },
  { fieldName: "area2name", name: "area2name", header: { text: "City/District Name" } },
  { fieldName: "area3code", name: "area3code", header: { text: "Town Code" } },
  { fieldName: "area3name", name: "area3name", header: { text: "Town Name" } },
  { fieldName: "iconControl", name: "iconControl" }
];

const { treeView, dataProvider } = RealGrid.createTree("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  treeOptions: {
    iconImagesRoot: "/images/treeImage/",
    iconImages: ["grd_tree_open.png", "grd_tree_close.png", "grd_treeicon_leaf.png"],
    expandedIcon: 0,
    collapsedIcon: 1,
    defaultIcon: 2
  },
  onInitialized: (tree) => {
    fetch('/data/en/areatree.json')
      .then(response => response.json())
      .then(data => {
        tree.getDataSource().setRows(data, 'treeId', false, null, "iconControl");
      });
  }
}, {
  fields
});

treeView.onTreeItemExpanding = function (tree, itemIndex, rowId) {
  console.log("expanding");
  var value = tree.getValue(itemIndex, "treeName");
  return value != 'Jongno-gu';
};

treeView.onTreeItemCollapsing = function (tree, itemIndex, rowId) {
  console.log("collapsing");
  var value = tree.getValue(itemIndex, "treeName");
  return value != 'Jung-gu';
};

treeView.onTreeItemExpanded = function (tree, itemIndex, rowId) {
  console.log("expanded");
};

treeView.onTreeItemCollapsed = function (tree, itemIndex, rowId) {
  console.log("collpased");
};

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