const fields = [
  {
    fieldName: "UserId"
  },
  {
    fieldName: "UserName"
  },
  {
    fieldName: "Age"
  },
  {
    fieldName: "Gender"
  },
  {
    fieldName: "MobilePhone"
  },
  {
    fieldName: "Email"
  },
  {
    fieldName: "AgeLabel"
  }
];

const columns = [
  {
    name: "UserId",
    fieldName: "UserId",
    width: "90",
    header: {
      text: "User ID"
    }
  },
  {
    name: "UserName",
    fieldName: "UserName",
    width: "170",
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    header: {
      text: "Values/Labels",
      styleName: "orange-column"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "130",
    lookupDisplay: true,
    labelField: "AgeLabel",
    header: {
      text: "Label Field"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "100",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Male",
      "Female"
    ],
    labels: [
      "<Male>",
      "<Female>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 2,
      domainOnly: true
    },
    header: {
      text: "Gender"
    }
  },
  {
    name: "MobilePhone",
    fieldName: "MobilePhone",
    width: "200",
    header: {
      text: "Mobile Phone"
    }
  },
  {
    name: "Email",
    fieldName: "Email",
    type: "data",
    width: "200",
    header: {
      text: "Email"
    }
  }
];

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/demo_json1.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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