const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID",
    dataType: "text"
  },
  {
    fieldName: "EmployeeID",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CompanyName",
    dataType: "text"
  },
  {
    fieldName: "Country",
    dataType: "text"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductName",
    dataType: "text"
  },
  {
    fieldName: "QuantityPerUnit",
    dataType: "text"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "Country",
    fieldName: "Country",
    type: "data",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    type: "data",
    width: "120",
    styleName: "blue-column",
    header: {
      text: "Company Name"
    }
  },
  {
    name: "UnitPrice2",
    fieldName: "UnitPrice",
    type: "data",
    width: "100",
    renderer: {
      type: "bar",
      origin: "left",
      barWidth: "80%"
    },
    header: {
      text: "UnitPrice2"
    },
    footer: {
      expression: "sum"
    }
  },
  {
    name: "OrderID",
    fieldName: "OrderID",
    type: "data",
    width: "80",
    header: {
      text: "Order ID"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    type: "data",
    width: "90",
    header: {
      text: "Customer ID"
    }
  },
  {
    name: "EmployeeID",
    fieldName: "EmployeeID",
    type: "data",
    width: "90",
    header: {
      text: "Employee ID"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    type: "data",
    width: "130",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    type: "data",
    width: "90",
    renderer: {
      type: "button"
    },
    header: {
      text: "Button"
    }
  },
  {
    name: "Phone2",
    fieldName: "Phone",
    type: "data",
    width: "90",
    header: {
      text: "Phone2"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    type: "data",
    width: "200",
    header: {
      text: "Product Name"
    }
  },
  {
    name: "QuantityPerUnit",
    fieldName: "QuantityPerUnit",
    type: "data",
    width: "100",
    header: {
      text: "Quantity / Unit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    type: "data",
    width: "100",
    header: {
      text: "Quantity"
    },
    footer: {
      expression: "sum"
    }
  },
  {
    name: "UnitPrice",
    fieldName: "UnitPrice",
    type: "data",
    width: "100",
    header: {
      text: "Unit Price"
    },
    footer: {
      expression: "avg",
      groupExpression: "max"
    }
  },
  {
    name: "Country2",
    fieldName: "Country",
    type: "data",
    width: "100",
    header: {
      text: "Country2"
    }
  }
];

const layout1 = [
  {
    name: "companyGroup",
    direction: "horizontal",
    items: [
      "Country",
      "CompanyName"
    ],
    header: {
      text: "Company",
    }
  },
  "OrderID",
  "CustomerID",
  "EmployeeID",
  "OrderDate",
  "Phone"
];

function btnVindex() {
  var vidx = gridView.layoutByName("companyGroup").vindex == 0 ? 3 : 0;
  gridView.layoutByName("companyGroup").vindex = vidx;
}

function btnHeaderText() {
  var headerTxt = gridView.layoutByName("companyGroup").header.text == "Company" ? "Company" : "Company";
  gridView.layoutByName("companyGroup").header.text = headerTxt;
}

function btnDirection() {
  var dir = gridView.layoutByName("companyGroup").direction == "horizontal" ? "vertical" : "horizontal";
  gridView.layoutByName("companyGroup").direction = dir;
}

function btnVindex1() {
  var vidx = gridView.layoutByName("OrderDate").vindex == 4 ? 0 : 4;
  gridView.layoutByName("OrderDate").vindex = vidx;
}

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: -1
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.setColumnLayout(layout1);
      });
  }
}, {
  fields
});

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