"use strict";
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuBar = void 0;
var React = require("react");
var recoil_1 = require("recoil");
var lib_1 = require("typestyle/lib");
var Edit_1 = require("../icons/Edit");
var Eraser_1 = require("../icons/Eraser");
var FormatPaint_1 = require("../icons/FormatPaint");
var recoils_1 = require("../recoils");
var IconButton_1 = require("./IconButton");
var Paper_1 = require("./Paper");
var root = lib_1.style({
    margin: 16,
    marginBottom: 8,
    height: 56,
    position: 'relative',
    zIndex: 1,
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center'
});
function MenuBar() {
    var _a = __read(recoil_1.useRecoilState(recoils_1.cursorModeState), 2), cursorMode = _a[0], setCusrorMode = _a[1];
    var _b = __read(recoil_1.useRecoilState(recoils_1.paletteSelectionState), 2), selection = _b[0], setSelection = _b[1];
    var palettePageLoadable = recoil_1.useRecoilValueLoadable(recoils_1.palettePagesState);
    var handleEraser = React.useCallback(function () {
        setCusrorMode('eraser');
    }, []);
    var handlePen = React.useCallback(function () {
        if (selection === null) {
            // 一番左上のひとつ右隣を自動的に選ぶ
            var pages = palettePageLoadable.state === 'hasValue'
                ? palettePageLoadable.contents
                : undefined;
            if (!pages)
                return; // type hint
            var pos = { row: 0, col: 1, num: 1 };
            setSelection({
                page: pages[0].index,
                start: pos,
                end: pos
            });
        }
        setCusrorMode('pen');
    }, [selection, palettePageLoadable]);
    var handleBase = React.useCallback(function () {
        setCusrorMode('base');
    }, []);
    return (React.createElement(Paper_1.Paper, { id: "rme-menu-bar", className: root },
        React.createElement(IconButton_1.IconButton, { active: cursorMode === 'pen', label: "\u3048\u3093\u3074\u3064", margin: true, disabled: palettePageLoadable.state !== 'hasValue', onClick: handlePen },
            React.createElement(Edit_1.default, null)),
        React.createElement(IconButton_1.IconButton, { active: cursorMode === 'eraser', label: "\u6D88\u3057\u30B4\u30E0", margin: true, onClick: handleEraser },
            React.createElement(Eraser_1.default, null)),
        React.createElement(IconButton_1.IconButton, { active: cursorMode === 'base', label: "\u3058\u3081\u3093", margin: true, onClick: handleBase },
            React.createElement(FormatPaint_1.default, null))));
}
exports.MenuBar = MenuBar;
//# sourceMappingURL=MenuBar.js.map