"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var lib_1 = require("typestyle/lib");
var csstips = require("csstips/lib");
var lodash_1 = require("lodash");
var MenuBar_1 = require("./MenuBar");
var getScrollbarWidth_1 = require("../utils/getScrollbarWidth");
var tileSize = 32;
var container8 = (tileSize + 1) * 8 - 1;
var table = lib_1.style(csstips.flex, csstips.horizontal, csstips.wrap, csstips.betweenJustified, {
    overflowY: 'scroll',
    $nest: {
        '&>img': {
            cursor: 'copy',
            boxSizing: 'content-box',
            borderWidth: 1,
            borderStyle: 'solid',
            borderColor: 'transparent',
            width: tileSize,
            height: tileSize,
            margin: -1,
            marginBottom: 0
        },
        '&>img.selected': {
            borderColor: MenuBar_1.selectedColor
        }
    }
});
var nibView = lib_1.style(csstips.selfCenter, csstips.vertical, {
    flexBasis: tileSize * 5,
    justifyContent: 'center',
    $nest: {
        '&>div': {
            height: tileSize
        }
    }
});
var PaletteView = /** @class */ (function (_super) {
    __extends(PaletteView, _super);
    function PaletteView() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PaletteView.prototype.render = function () {
        var _this = this;
        var nibSquares = lodash_1.flatten(this.props.nib);
        var selected = function (square) {
            return nibSquares.some(function (n) { return n.index === square.index; }) ? 'selected' : '';
        };
        var container = lib_1.style(csstips.vertical, {
            flexBasis: container8 + getScrollbarWidth_1.default()
        });
        return (React.createElement("div", { className: container },
            React.createElement("div", { className: table, onMouseUp: function () { return _this.props.confirmSelection(); }, onMouseLeave: function () { return _this.props.confirmSelection(); } }, this.props.tileSet.map(function (square, num) { return (React.createElement("img", { key: square.index, src: square.tile.image.src, alt: "tile", className: selected(square), draggable: false, onMouseDown: function () {
                    return _this.props.startSelection({
                        row: (num / 8) >> 0,
                        col: num % 8,
                        num: num
                    });
                }, onMouseMove: function () {
                    return _this.props.updateSelection({
                        row: (num / 8) >> 0,
                        col: num % 8,
                        num: num
                    });
                } })); })),
            React.createElement("div", { className: nibView }, this.props.nib &&
                this.props.nib.map(function (row, i) { return (React.createElement("div", { key: i }, row.map(function (square, j) { return (React.createElement("img", { key: j, src: square.tile.image.src, alt: "selected tile", draggable: false })); }))); }))));
    };
    return PaletteView;
}(React.Component));
exports.default = PaletteView;
//# sourceMappingURL=PaletteView.js.map