var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', '../../../../index', './List.Grid.Example.scss'], function (require, exports, React, index_1) {
    "use strict";
    var ROWS_PER_PAGE = 3;
    var ListGridExample = (function (_super) {
        __extends(ListGridExample, _super);
        function ListGridExample() {
            _super.call(this);
            this._positions = {};
            this._getItemCountForPage = this._getItemCountForPage.bind(this);
            this._getPageHeight = this._getPageHeight.bind(this);
        }
        ListGridExample.prototype.render = function () {
            var _this = this;
            return (React.createElement(index_1.FocusZone, null, React.createElement(index_1.List, {className: 'ms-ListGridExample', items: this.props.items, getItemCountForPage: this._getItemCountForPage, getPageHeight: this._getPageHeight, onRenderCell: function (item, index) { return (React.createElement("div", {className: 'ms-ListGridExample-tile', "data-is-focusable": true, style: {
                width: _this._columnWidth,
                height: _this._rowHeight,
                backgroundColor: "rgba(" + (4 * (index % 32) + 127) + ", " + (4 * (index % 32) + 127) + ", " + (4 * (index % 32) + 127) + ", 1)"
            }}, React.createElement(index_1.Image, {className: 'ms-ListGridExample-image', src: _this._getThumbnail(item, _this._rowHeight), imageFit: index_1.ImageFit.cover, width: _this._rowHeight, height: _this._rowHeight}), React.createElement("span", {className: 'ms-ListGridExample-label'}, "item " + index))); }})));
        };
        ListGridExample.prototype._getThumbnail = function (item, rowHeight) {
            var aspectRatio = item.width / item.height;
            if (item.width >= item.height) {
                return "//placekitten.com/" + Math.round(aspectRatio * rowHeight) + "/" + rowHeight;
            }
            else {
                return "//placekitten.com/" + rowHeight + "/" + Math.round(rowHeight / aspectRatio);
            }
        };
        ListGridExample.prototype._getItemCountForPage = function (itemIndex, surfaceRect) {
            if (itemIndex === 0) {
                this._columnCount = Math.ceil(surfaceRect.width / 200);
                this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);
                this._rowHeight = this._columnWidth;
            }
            return this._columnCount * ROWS_PER_PAGE;
        };
        ListGridExample.prototype._getPageHeight = function (itemIndex, surfaceRect) {
            return this._rowHeight * ROWS_PER_PAGE;
        };
        return ListGridExample;
    }(React.Component));
    exports.ListGridExample = ListGridExample;
});
