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: "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 { treeView, dataProvider } = RealGrid.createTree("realgrid", {
  columns,
  header: {
    height: 40,
    showTooltip: true
  },
  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,
    expanderIconStyle: "square"
  },
  onInitialized: (tree) => {
    fetch('/data/en/areatree.json')
      .then(response => response.json())
      .then(data => {
        tree.getDataSource().setRows(data, 'treeId', false, null, "iconField");
      });
  }
}, {
  fields
});

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