"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 Edit_1 = require("../icons/Edit");
var Eraser_1 = require("../icons/Eraser");
var container = lib_1.style(csstips.horizontal, {
    height: 48,
    fontSize: 24 // SVG アイコンのサイズ
});
var layerView = lib_1.style(csstips.flex1, {
    minWidth: 120
});
var canvasView = lib_1.style(csstips.flex8, csstips.horizontal, csstips.aroundJustified);
var paletteView = lib_1.style(csstips.flex1, {
    minWidth: 120
});
var icons = lib_1.style({
    marginTop: (48 - 24) / 2,
    width: '1em',
    height: '1em',
    overflow: 'visible !important'
});
exports.selectedColor = '#2196f3';
var eraser = {
    enabled: lib_1.style({
        color: '#ffffff',
        stroke: exports.selectedColor
    }),
    disabled: lib_1.style({
        color: '#ffffff',
        stroke: '#000000'
    })
};
var edit = {
    enabled: lib_1.style({
        color: exports.selectedColor
    }),
    disabled: lib_1.style({
        color: '#000000'
    })
};
var MenuBar = /** @class */ (function (_super) {
    __extends(MenuBar, _super);
    function MenuBar() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MenuBar.prototype.render = function () {
        var cursorMode = this.props.cursorMode;
        return (React.createElement("div", { className: container },
            React.createElement("div", { className: layerView }),
            React.createElement("div", { className: canvasView },
                React.createElement("div", { className: icons }),
                React.createElement("div", { className: icons }),
                React.createElement("div", { className: icons }),
                React.createElement(Eraser_1.default, { className: lib_1.classes(icons, cursorMode === 'eraser' ? eraser.enabled : eraser.disabled), onClick: this.props.onClickEraser }),
                React.createElement(Edit_1.default, { className: lib_1.classes(icons, cursorMode === 'pen' ? edit.enabled : edit.disabled), onClick: this.props.onClickEdit })),
            React.createElement("div", { className: paletteView })));
    };
    return MenuBar;
}(React.Component));
exports.default = MenuBar;
//# sourceMappingURL=MenuBar.js.map