"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var csstips = require("csstips/lib");
var React = require("react");
var react_redux_1 = require("react-redux");
var lib_1 = require("typestyle/lib");
var useTypedSelector_1 = require("../hooks/useTypedSelector");
var Edit_1 = require("../icons/Edit");
var Eraser_1 = require("../icons/Eraser");
var palette_1 = require("../redux/palette");
exports.menuBarHeight = 48;
var container = lib_1.style(csstips.content, {
    height: exports.menuBarHeight,
    position: 'relative',
    zIndex: 1,
    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'
    })
};
function MenuBar() {
    var cursorMode = useTypedSelector_1.useTypedSelector(function (state) { return state.palette.cursorMode; });
    var dispatch = react_redux_1.useDispatch();
    var handleEraser = React.useCallback(function () {
        dispatch(palette_1.actions.setCursorMode('eraser'));
    }, []);
    var handlePen = React.useCallback(function () {
        dispatch(palette_1.actions.setCursorMode('pen'));
    }, []);
    return (React.createElement("div", { className: lib_1.classes(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: handleEraser }),
            React.createElement(Edit_1.default, { className: lib_1.classes(icons, cursorMode === 'pen' ? edit.enabled : edit.disabled), onClick: handlePen })),
        React.createElement("div", { className: paletteView })));
}
exports.MenuBar = MenuBar;
//# sourceMappingURL=MenuBar.js.map