"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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.SettingView = void 0;
var React = require("react");
var recoil_1 = require("recoil");
var lib_1 = require("typestyle/lib");
var GridOn_1 = require("../icons/GridOn");
var PhotoSizeSelectLarge_1 = require("../icons/PhotoSizeSelectLarge");
var Undo_1 = require("../icons/Undo");
var recoils_1 = require("../recoils");
var colors_1 = require("../utils/colors");
var dataUrls_1 = require("../utils/dataUrls");
var resizeSceneMap_1 = require("../utils/resizeSceneMap");
var undoEditing_1 = require("../utils/undoEditing");
var Button_1 = require("./Button");
var Dialog_1 = require("./Dialog");
var IconButton_1 = require("./IconButton");
var Paper_1 = require("./Paper");
var thumbnailWidth = 120;
var cn = {
    root: lib_1.style({
        paddingTop: 16,
        paddingRight: 16
    }),
    container: lib_1.style({
        display: 'flex',
        alignItems: 'center',
        height: 56,
        minWidth: 120
    }),
    resizseDialog: {
        content: lib_1.style({
            maxWidth: 288,
            paddingLeft: 32,
            paddingTop: 32,
            paddingBottom: 32,
            marginLeft: 'auto',
            marginRight: 'auto'
        }),
        thumbnail: lib_1.style({
            backgroundImage: "url(" + dataUrls_1.thumbnail + ")",
            backgroundRepeat: 'repeat'
        }),
        cols: lib_1.style({
            paddingBottom: 16,
            marginBottom: 32,
            borderBottom: "1px solid " + colors_1.colors.border,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
        }),
        rows: lib_1.style({
            marginLeft: 32,
            borderLeft: "1px solid " + colors_1.colors.border,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            paddingLeft: 16
        }),
        flex: lib_1.style({
            display: 'flex'
        })
    },
    input: lib_1.style({
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        position: 'relative',
        $nest: {
            '&>input': {
                width: 80,
                paddingRight: 40
            },
            '&>span': {
                position: 'absolute',
                color: colors_1.colors.textSecondary,
                right: 4,
                wordBreak: 'keep-all',
                pointerEvents: 'none'
            }
        }
    }),
    invalid: lib_1.style({
        color: colors_1.colors.error
    }),
    helperText: lib_1.style({
        position: 'absolute',
        top: '-0.8rem',
        left: 0,
        fontSize: '0.5em'
    })
};
function SettingView() {
    var _a = __read(recoil_1.useRecoilState(recoils_1.debugState), 2), debug = _a[0], setDebug = _a[1];
    var toggleDebug = React.useCallback(function () {
        setDebug(function (debug) { return !debug; });
    }, []);
    var setEditing = recoil_1.useSetRecoilState(recoils_1.editingState);
    var undo = React.useCallback(function () {
        setEditing(function (current) { return undoEditing_1.undoEditing(current); });
    }, []);
    var undoPatches = recoil_1.useRecoilValue(recoils_1.undoPatchesState);
    var _b = __read(React.useState(false), 2), openResize = _b[0], setOpenResize = _b[1];
    return (React.createElement("div", { className: cn.root },
        React.createElement(Paper_1.Paper, { className: cn.container },
            React.createElement(IconButton_1.IconButton, { label: "\u3082\u3069\u3059", margin: true, disabled: undoPatches.length === 0, onClick: undo },
                React.createElement(Undo_1.default, null)),
            React.createElement(IconButton_1.IconButton, { active: debug, label: "\u306F\u3093\u3066\u3044", margin: true, onClick: toggleDebug },
                React.createElement(GridOn_1.default, null)),
            React.createElement(IconButton_1.IconButton, { label: "\u30B5\u30A4\u30BA", margin: true, onClick: function () {
                    setOpenResize(true);
                } },
                React.createElement(PhotoSizeSelectLarge_1.default, null))),
        openResize ? (React.createElement(ResizeDialog, { open: true, onClose: function () { return setOpenResize(false); } })) : null));
}
exports.SettingView = SettingView;
function ResizeDialog(props) {
    var tables = recoil_1.useRecoilValue(recoils_1.sceneMapState).tables;
    var _a = __read(React.useState(tables[0].length), 2), rows = _a[0], setRows = _a[1];
    var _b = __read(React.useState(tables[0][0].length), 2), cols = _b[0], setCols = _b[1];
    var virtualHeight = (thumbnailWidth / cols) * rows;
    var maxHeight = 200;
    var scale = Math.min(1, maxHeight / virtualHeight);
    var height = Math.floor(virtualHeight * scale);
    var width = Math.floor(thumbnailWidth * scale);
    var backgroundSize = (((15 / cols) * width) >> 0) + "px " + (((10 / rows) * height) >> 0) + "px";
    var _c = __read(React.useState(false), 2), rowsInvalid = _c[0], setRowsInvalid = _c[1];
    var _d = __read(React.useState(false), 2), colsInvalid = _d[0], setColsInvalid = _d[1];
    var setEditing = recoil_1.useSetRecoilState(recoils_1.editingState);
    var handleDecide = React.useCallback(function () {
        setEditing(function (curr) { return resizeSceneMap_1.resizeSceneMap(curr, rows, cols); });
        props.onClose();
    }, [props.onClose, rows, cols]);
    return (React.createElement(Dialog_1.Dialog, __assign({}, props),
        React.createElement("div", null,
            React.createElement(Dialog_1.DialogHeader, null, "\u306F\u3044\u3051\u3044\u306E\u30B5\u30A4\u30BA\u3092\u304D\u3081\u3088\u3046"),
            React.createElement(Dialog_1.DialogContent, { className: cn.resizseDialog.content },
                React.createElement("div", null,
                    React.createElement("div", { className: cn.resizseDialog.cols, style: { width: width } },
                        React.createElement(Input, { defaultValue: cols, max: 100, min: 15, onChange: setCols, onSetInvalid: setColsInvalid }))),
                React.createElement("div", { className: cn.resizseDialog.flex },
                    React.createElement("div", { className: lib_1.classes(cn.resizseDialog.thumbnail), style: { width: width, height: height, backgroundSize: backgroundSize } }),
                    React.createElement("div", { className: cn.resizseDialog.rows },
                        React.createElement(Input, { defaultValue: rows, max: 100, min: 10, onChange: setRows, onSetInvalid: setRowsInvalid })))),
            React.createElement(Dialog_1.DialogFooter, null,
                React.createElement(Button_1.Button, { disabled: colsInvalid || rowsInvalid, onClick: handleDecide }, "\u3051\u3063\u3066\u3044")))));
}
function Input(props) {
    var _a = __read(React.useState(props.defaultValue + ''), 2), text = _a[0], setText = _a[1];
    // valid でなければ onChange はコールされない
    var number = parseInt(text);
    var isInvalid = Number.isNaN(number) || number > props.max || number < props.min;
    React.useEffect(function () {
        if (!isInvalid) {
            props.onChange(number);
        }
        props.onSetInvalid(isInvalid);
    }, [number, isInvalid]);
    return (React.createElement("div", { className: cn.input },
        React.createElement("input", { type: "text", value: text, maxLength: 3, className: lib_1.classes(isInvalid && cn.invalid), onChange: function (event) { return setText(event.target.value); }, onClick: function (event) {
                event.currentTarget.select();
            } }),
        React.createElement("span", null, "\u30DE\u30B9"),
        React.createElement("span", { className: cn.helperText }, props.min + "\u301C" + props.max)));
}
//# sourceMappingURL=SettingView.js.map