"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 });
var next_1 = require("@hackforplay/next");
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 canvas_1 = require("../redux/canvas");
var cursor_1 = require("../utils/cursor");
var cn = {
    root: lib_1.style(csstips.flex8),
    renderRoot: lib_1.style({
        width: '100%',
        height: '100%',
        padding: 16,
        overflow: 'scroll'
    })
};
function CanvasView() {
    var cursorMode = useTypedSelector_1.useTypedSelector(function (state) { return state.palette.cursorMode; });
    var nib = useTypedSelector_1.useTypedSelector(function (state) { return state.palette.nib; });
    var cursor = cursor_1.cursorClasses[cursorMode];
    var _a = __read(React.useState(10 * 32), 1), height = _a[0]; // TODO: 可変
    var _b = __read(React.useState(15 * 32), 1), width = _b[0]; // TODO: 可変
    var canvasRendererRef = React.useRef();
    var containerRef = React.useRef(null);
    React.useEffect(function () {
        var container = containerRef.current;
        if (!container || canvasRendererRef.current)
            return;
        canvasRendererRef.current = new next_1.CanvasRenderer(container, {
            width: width,
            height: height
        });
    }, [containerRef.current]);
    var _c = __read(React.useState({
        px: -1,
        py: -1,
        pressed: false,
        id: 0
    }), 1), mutate = _c[0];
    var sceneMap = useTypedSelector_1.useTypedSelector(function (state) { return state.canvas; });
    React.useEffect(function () {
        var canvasRenderer = canvasRendererRef.current;
        if (!canvasRenderer)
            return;
        canvasRenderer.update({
            debug: true,
            map: sceneMap,
            screen: {
                width: width,
                height: height
            }
        });
    }, [sceneMap, width, height]);
    var dispatch = react_redux_1.useDispatch();
    var handleMove = function (e) {
        if (!mutate.pressed)
            return;
        var _a = e.currentTarget, offsetLeft = _a.offsetLeft, offsetTop = _a.offsetTop, parentElement = _a.parentElement;
        var x = ((e.clientX -
            offsetLeft +
            (parentElement ? parentElement.scrollLeft : 0)) /
            32) >>
            0;
        var y = ((e.clientY - offsetTop + (parentElement ? parentElement.scrollTop : 0)) /
            32) >>
            0;
        if (x !== mutate.px || y !== mutate.py) {
            mutate.px = x;
            mutate.py = y;
            dispatch(canvas_1.actions.draw(new cursor_1.default(x, y, cursorMode, nib, mutate.id)));
        }
    };
    var handleMouseDown = function (e) {
        mutate.px = -1;
        mutate.py = -1;
        mutate.pressed = true;
        mutate.id++;
        handleMove(e);
    };
    var handleTouchMove = function (e) {
        if (!mutate.pressed)
            return;
        var _a = e.currentTarget, offsetLeft = _a.offsetLeft, offsetTop = _a.offsetTop, parentElement = _a.parentElement;
        var primary = e.touches.item(0);
        var x = ((primary.clientX -
            offsetLeft +
            (parentElement ? parentElement.scrollLeft : 0)) /
            32) >>
            0;
        var y = ((primary.clientY -
            offsetTop +
            (parentElement ? parentElement.scrollTop : 0)) /
            32) >>
            0;
        if (x !== mutate.px || y !== mutate.py) {
            mutate.px = x;
            mutate.py = y;
            dispatch(canvas_1.actions.draw(new cursor_1.default(x, y, cursorMode, nib, mutate.id)));
        }
    };
    var handleTouchStart = function (e) {
        mutate.px = -1;
        mutate.py = -1;
        mutate.pressed = true;
        mutate.id++;
        handleTouchMove(e);
    };
    return (React.createElement("div", { className: cn.root },
        React.createElement("div", { className: cn.renderRoot, ref: containerRef },
            React.createElement("canvas", { className: cursor, width: width, height: height, onTouchStart: handleTouchStart, onTouchCancel: function () { return (mutate.pressed = false); }, onTouchEnd: function () { return (mutate.pressed = false); }, onTouchMove: handleTouchMove, onMouseDown: handleMouseDown, onMouseUp: function () { return (mutate.pressed = false); }, onMouseLeave: function () { return (mutate.pressed = false); }, onMouseMove: handleMove }))));
}
exports.CanvasView = CanvasView;
//# sourceMappingURL=CanvasView.js.map