const fields = [
  { fieldName: "ItemId" },
  { fieldName: "ItemName" },
  { fieldName: "RequestType" },
  { fieldName: "ServiceName" },
  { fieldName: "ServiceCode" },
  { fieldName: "Standard" },
  { fieldName: "LowBounds" },
  { fieldName: "Lowwhengn" },
  { fieldName: "Highwhengn" },
  { fieldName: "HighBounds" },
  { fieldName: "CheckUnit" },
  { fieldName: "CheckPrice", dataType: "number" }
];

const columns = [
  { fieldName: "ItemId", width: 80, header: { text: "ItemId" } },
  { fieldName: "ItemName", width: 100, header: { text: "Item Name" } },
  { fieldName: "RequestType", width: 80, header: { text: "Category" } },
  { fieldName: "ServiceName", width: 150, header: { text: "Type Name" } },
  { fieldName: "ServiceCode", width: 150, header: { text: "Service Code" } },
  { fieldName: "Standard", width: 150, header: { text: "Standard" } },
  { fieldName: "LowBounds", width: 120, header: { text: "Lower Value" } },
  { fieldName: "HighBounds", width: 80, header: { text: "Upper Value" } },
  { fieldName: "CheckUnit", width: 80, header: { text: "Unit" } },
  { fieldName: "CheckPrice", width: 90, header: { text: "Fee" } }
];

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
  }
}, {
  fields
});

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

function btnLargeLoadData() {
  const showLoadingCheckbox = document.getElementById("showLoading");
  if (showLoadingCheckbox && showLoadingCheckbox.checked) {
    gridView.showLoading();
  }

  const now = new Date();
  fetch('/data/en/TooLargeDataSet.csv')
    .then(response => response.text())
    .then(csvData => {
      dataProvider.fillCsvData(csvData, {});
      gridView.closeLoading();

      const endDate = new Date();
      const dataTime = endDate.getTime() - now.getTime();
      const ellapseElement = document.getElementById("ellapse");
      if (ellapseElement) {
        ellapseElement.innerHTML = dataProvider.getRowCount() + " items output time: " + dataTime + " ms";
      }
    })
    .catch(err => {
      console.error(err);
      gridView.closeLoading();
    });
}