/// <reference path="../../../typescript/all.d.ts" />

// To use ListViews with your own custom data, you can use an ArrayDataSource.
//  This class implements the methods from SharedLists that are used in LVs, such as 
//  locked(), modifyAsync(), and setAutoSort(), but in pure JS.
requirejs('helpers/arrayDataSource.js');

// For this example, we'll use a simple list of people, with their names, favorite food,
//  and birthday, to demonstrate data that isn't present in MM's database.
const people = [
    {
        name: 'Jane Doe',
        faveFood: 'Cheeseburger',
        birthday: new Date('1966-09-12'),
    },
    {
        name: 'John Smith',
        faveFood: 'Apples',
        birthday: new Date('1994-07-21'),
    },
    {
        name: 'Muhammad Ali',
        faveFood: 'Broccoli',
        birthday: new Date('1942-01-17'),
    },
    {
        name: 'Napoleon Bonaparte',
        faveFood: 'Toast',
        birthday: new Date('1769-08-15'),
    }
];

// If we want to enable sorting, we need to specify a property "fieldDefs" to our GridView.
//  If you disable sorting (via the "isSortable" parameter in data-init-params), you can get away with 
//  just providing columns with the following properties: title, and bindData
const fieldDefs = {
    name: {
        // Title is hopefully self-explanatory.
        title: 'Name',
        // bindData is used to populate a given div with the data associated with this column/field.
        //  index refers to which index the item is inside the dataSource AFTER sorting.
        //  in other words, if people is sorted by name, Jane Doe's index would be 0, but
        //  if people is sorted by birthday, Napoleon Bonaparte would be 0.
        bindData: function (div, item, index) {
            div.innerText = item.name;
        },
        // columnType is required if you want to enable sorting. MM's code assumes that columnType is
        //  the same as the associated key in your data AND the key inside fieldDefs.
        //  In other words: fieldDefs[myColumnName] == fieldDefs[myColumnName].columnType == myColumnName AND myDatum[myColumnName] exists
        columnType: 'name', 
    },
    faveFood: {
        title: 'Favorite food',
        bindData: function (div, item, index) {
            div.innerText = item.faveFood;
        },
        columnType: 'faveFood',
    },
    birthday: {
        title: 'Birthday',
        bindData: function (div, item, index) {
            // Example for how you can do more complex operations in bindData if you need to.
            div.innerText = '🎂 ' + item.birthday.toLocaleDateString();
        },
        columnType: 'birthday',
    }
}

// You must provide a list of columns to the GridView, via the setColumns method.
const columns = [
    {
        // width is optional. It lets you specify the default width of the column, in pixels.
        width: 200,
        title: fieldDefs.name.title, 
        bindData: fieldDefs.name.bindData,
        // For sorting to work properly, make sure columnType is present in the column as well as in fieldDefs.
        columnType: 'name',
    },
    {
        width: 150,
        title: fieldDefs.faveFood.title,
        bindData: fieldDefs.faveFood.bindData,
        columnType: 'faveFood',
    },
    {
        width: 100,
        title: fieldDefs.birthday.title,
        bindData: fieldDefs.birthday.bindData,
        columnType: 'birthday',
    }
];

var UI;

function init(params) {
    UI = getAllUIElements();
    
    // Provide the source array inside the ArrayDataSource constructor.
    const myDataSource = new ArrayDataSource(people);
    
    UI.myGridView.controlClass.setColumns(columns);
    UI.myGridView.controlClass.dataSource = myDataSource;
    UI.myGridView.controlClass.fieldDefs = fieldDefs;
}