const area1codes = {id:"area1codeId", levels:1, keys: [], values: []};
const area2codes = {id:"area2codeId", levels:2, tags: [], keys: [], values: []};
const area3codes = {id:"area3codeId", levels:3, tags: [], keys: [], values: []};

const fields = [
  {fieldName:"area1code", dataType:"text"},
  {fieldName:"area2code", dataType:"text"},
  {fieldName:"area3code", dataType:"text"}
];

const columns = [
  {
    name:"area1lookup", 
    fieldName:"area1code", 
    header:{
      text:"Province"
    }, 
    width:200,
    sortByLabel:true, 
    lookupDisplay:true, 
    values:area1codes.keys, 
    labels:area1codes.values,
    editor:{
      type:"dropdown"
    }
  },
  {
    name:"area2lookup", 
    fieldName:"area2code", 
    header:{
      text:"City/District"
    }, 
    width:200,
    lookupDisplay:true, 
    lookupSourceId:"area2codeId", 
    lookupKeyFields:["area1code","area2code"],
    editor:{
      type:"dropdown"
    }
  },
  {
    name:"area3lookup", 
    fieldName:"area3code", 
    header:{
      text:"Town/Village"
    }, 
    width:200,
    lookupDisplay:true, 
    lookupSourceId:"area3codeId", 
    lookupKeyFields:["area1code","area2code","area3code"],
    editor:{
      type:"dropdown"
    }
  }
];

function makeLookupSource(areacodes) {
  for (var i = 0, cnt = areacodes.length; i < cnt ; i++) {
    var codes = areacodes[i];
    if (area1codes.keys.indexOf(codes.area1code) < 0) {
      area1codes.keys.push(codes.area1code);
      area1codes.values.push(codes.area1name);
    }
    if (area2codes.tags.indexOf(codes.area2code) < 0) {
      area2codes.tags.push(codes.area2code);
      area2codes.keys.push([codes.area1code, codes.area2code]);
      area2codes.values.push(codes.area2name);
    }
    if (area3codes.tags.indexOf(codes.area3code) < 0) {
      area3codes.tags.push(codes.area3code);
      area3codes.keys.push([codes.area1code, codes.area2code, codes.area3code]);
      area3codes.values.push(codes.area3name);
    }
  }
}

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/areacodes.js')
      .then(response => response.text())
      .then(text => {
        eval(text);
        const areacodes = window.areacodes;
        
        makeLookupSource(areacodes);
        
        grid.addLookupSource(area2codes);
        grid.addLookupSource(area3codes);
        
        const sampleData = [];
        for (let i = 0; i < 20; i++) {
          const idx = Math.floor(Math.random() * areacodes.length);
          sampleData.push([
            areacodes[idx].area1code,
            areacodes[idx].area2code,
            areacodes[idx].area3code
          ]);
        }
        grid.getDataSource().setRows(sampleData);
      });
    
    grid.onEditCommit = function (grid, index, oldValue, newValue) {
      if (index.fieldName === "area1code") {
        if (oldValue !== newValue) {
          grid.setValue(index.itemIndex, "area2code", "");
          grid.setValue(index.itemIndex, "area3code", "");
        }
      } else if (index.fieldName === "area2code") {
        if (oldValue !== newValue) {
          grid.setValue(index.itemIndex, "area3code", "");
        }
      }
    };
  }
}, {
  fields
});

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