import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@grapecity/wijmo.grid';
import { Selector } from '@grapecity/wijmo.grid.selector';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
    //
    // workers tree data (heterogeneous collection)
    var workers = [{
            name: 'Jack Smith',
            checks: [{
                    name: 'check1',
                    earnings: [
                        { name: 'hourly', hours: 30.0, rate: 15.0 },
                        { name: 'overtime', hours: 10.0, rate: 20.0 },
                        { name: 'bonus', hours: 5.0, rate: 30.0 }
                    ]
                }]
        }];
    //
    // workers tree
    var workersGrid = new wjGrid.FlexGrid('#workersGrid', {
        headersVisibility: 'Column',
        selectionMode: 'Row',
        childItemsPath: ['checks', 'earnings'],
        autoGenerateColumns: false,
        columns: [
            { binding: 'name', isReadOnly: true },
            { binding: 'hours', dataType: 'Number', format: 'n2' },
            { binding: 'rate', dataType: 'Number', format: 'n2' }
        ],
        loadedRows: function (s, e) {
            s.rows.forEach(function (row) {
                row.isReadOnly = false;
            });
        },
        beginningEdit: function (s, e) {
            var item = s.rows[e.row].dataItem, binding = s.columns[e.col].binding;
            if (!(binding in item)) { // property not on this item?
                e.cancel = true; // can't edit!
            }
        },
        itemsSource: workers
    });


    let selector = new Selector(workersGrid, {
        itemChecked: (s, e) => {
            console.log('checked -> ', s._grid.rows.filter(o => o.isSelected));
        }
    });
    selector.column = workersGrid.rowHeaders.columns[0];
    workersGrid.headersVisibility = wjGrid.HeadersVisibility.All;
}