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: "hasChild", dataType: "text" },
  { fieldName: "iconField", 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: "iconField", name: "iconField" }
];

const initialData = [
  {
    "treeId": "11",
    "treeName": "Seoul",
    "area1code": "11",
    "area1name": "Seoul",
    "hasChild": 1,
    "iconField": 0
  },
  {
    "treeId": "20",
    "treeName": "Jeju Island",
    "area1code": "22",
    "area1name": "Jeju Island",
    "hasChild": 0,
    "iconField": 8
  }
];

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/flags/",
    iconImages: [
      "kr.png",
      "de.png",
      "es.png",
      "fr.png",
      "grd_treeicon_leaf.png",
      "hu.png",
      "is.png",
      "kr.png",
      "mx.png",
      "pt.png",
      "us.png",
      "ve.png"
    ],
    defaultIcon: 4
  },
  onInitialized: (tree) => {
    tree.getDataSource().setRows(initialData, "treeId", true, "hasChild", "iconField");
  }
}, {
  fields
});

treeView.onTreeItemExpanding = function (tree, itemIndex, rowId) {
  if (dataProvider.getChildCount(rowId) <= 0) {
    var datas = [{
      "treeId": "11.010",
      "treeName": "Jongno-gu",
      "area1code": "11",
      "area1name": "Seoul",
      "area2code": "11010",
      "area2name": "Jongno-gu",
      "iconField": 1
    },
    {
      "treeId": "11.020",
      "treeName": "Jung-gu",
      "area1code": "11",
      "area1name": "Seoul",
      "area2code": "11020",
      "area2name": "Jung-gu",
      "iconField": 2
    },
    {
      "treeId": "11.030",
      "treeName": "Yongsan-gu",
      "area1code": "11",
      "area1name": "Seoul",
      "area2code": "11030",
      "area2name": "Yongsan-gu",
      "iconField": 3
    }];
    
    datas.forEach(function(el) {
      var childId = dataProvider.addChildRow(rowId, el, el.iconField, true);
    });
  }

  return true;
};

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