"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Navigator = exports.PanDirection = exports.ZoomDirection = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var i18n_1 = require("../api/i18n");
// According to this (https://github.com/mzabriskie/react-draggable/issues/246#issuecomment-299698481), typings
// only works if module type is "es6". This is not the case for us, so just use untyped require()
var react_draggable_1 = tslib_1.__importDefault(require("react-draggable"));
var number_1 = require("../utils/number");
var assets_1 = require("../constants/assets");
var ZoomDirection;
(function (ZoomDirection) {
    ZoomDirection[ZoomDirection["In"] = 0] = "In";
    ZoomDirection[ZoomDirection["Out"] = 1] = "Out";
})(ZoomDirection = exports.ZoomDirection || (exports.ZoomDirection = {}));
var PanDirection;
(function (PanDirection) {
    PanDirection[PanDirection["East"] = 0] = "East";
    PanDirection[PanDirection["West"] = 1] = "West";
    PanDirection[PanDirection["South"] = 2] = "South";
    PanDirection[PanDirection["North"] = 3] = "North";
})(PanDirection = exports.PanDirection || (exports.PanDirection = {}));
;
var VERT_START = 10;
var VERT_SPAN = 81; //This is the pixel height of the maximum draggable scale range
var LN9 = Math.log(9);
function calculatePosForScale(scale, finiteScaleList) {
    if (finiteScaleList) {
        var index = (0, number_1.getFiniteScaleIndexForScale)(finiteScaleList, scale);
        var pos = (VERT_SPAN / finiteScaleList.length) * (index + 1);
        //console.log(`Scale: ${scale} @ ${index} / ${finiteScaleList.length} -> ${Math.floor(pos)}`);
        return Math.floor(pos);
    }
    else {
        var pos = 9 * Math.log(scale) / LN9;
        return Math.floor(pos);
    }
}
function calculateScaleForPos(pos, finiteScaleList) {
    var scale = Math.pow(9, pos / 9);
    if (finiteScaleList) {
        var index = (0, number_1.getFiniteScaleIndexForScale)(finiteScaleList, scale);
        return finiteScaleList[index];
    }
    else {
        return scale;
    }
}
/**
 * The Navigator component provides an interactive zoom slider for the map viewer
 * @param props
 */
var Navigator = function (props) {
    var busy = props.busy, locale = props.locale;
    var onPanEast = function () {
        props.onPan(PanDirection.East);
    };
    var onPanWest = function () {
        props.onPan(PanDirection.West);
    };
    var onPanSouth = function () {
        props.onPan(PanDirection.South);
    };
    var onPanNorth = function () {
        props.onPan(PanDirection.North);
    };
    var onZoomOut = function () {
        props.onZoom(ZoomDirection.Out);
    };
    var onZoomIn = function () {
        props.onZoom(ZoomDirection.In);
    };
    var onStart = function (e) {
        e.preventDefault();
        //console.log(`Drag start (dy: ${data.deltaY})`);
        setIsDragging(true);
        setPreviewPos(pos);
    };
    var onDrag = function (e, data) {
        e.preventDefault();
        //console.log(`Dragging (dy: ${data.deltaY})`);
        var pos = previewPos;
        setPreviewPos(pos + data.deltaY);
    };
    var onStop = function (e) {
        e.preventDefault();
        var newScale = calculateScaleForPos(previewPos);
        //console.log(`posDelta: ${posDelta}`);
        setIsDragging(false);
        setPos(previewPos);
        props.onRequestZoomToScale(newScale);
    };
    //Used to specify the preview destination scale "position"
    var _a = React.useState(calculatePosForScale(props.scale, props.finiteScaleList)), previewPos = _a[0], setPreviewPos = _a[1];
    //Used to specify the current scale "position"
    var _b = React.useState(calculatePosForScale(props.scale, props.finiteScaleList)), pos = _b[0], setPos = _b[1];
    var _c = React.useState(false), isDragging = _c[0], setIsDragging = _c[1];
    React.useEffect(function () {
        var pos = calculatePosForScale(props.scale, props.finiteScaleList);
        setPos(pos);
        setPreviewPos(pos);
    }, [props.scale, props.finiteScaleList]);
    return React.createElement("div", { id: "Navigator", style: props.style, className: "component-navigator noselect" },
        React.createElement("map", { name: "Navigator_ImageMap", id: "Navigator_ImageMap" },
            React.createElement("area", { onClick: onPanEast, shape: "poly", alt: (0, i18n_1.tr)("NAVIGATOR_PAN_EAST", locale), title: (0, i18n_1.tr)("NAVIGATOR_PAN_EAST", locale), coords: "27,176, 27,177, 40,190, 44,182, 44,159" }),
            React.createElement("area", { onClick: onPanWest, shape: "poly", alt: (0, i18n_1.tr)("NAVIGATOR_PAN_WEST", locale), title: (0, i18n_1.tr)("NAVIGATOR_PAN_WEST", locale), coords: "24,177, 24,176, 7,159, 7,182, 11,190" }),
            React.createElement("area", { onClick: onPanSouth, shape: "poly", alt: (0, i18n_1.tr)("NAVIGATOR_PAN_SOUTH", locale), title: (0, i18n_1.tr)("NAVIGATOR_PAN_SOUTH", locale), coords: "25,178, 12,191, 21,197, 30,197, 39,191, 26,178" }),
            React.createElement("area", { onClick: onPanNorth, shape: "poly", alt: (0, i18n_1.tr)("NAVIGATOR_PAN_NORTH", locale), title: (0, i18n_1.tr)("NAVIGATOR_PAN_NORTH", locale), coords: "26,175, 43,158, 8,158, 25,175" }),
            React.createElement("area", { onClick: onZoomOut, shape: "circle", alt: (0, i18n_1.tr)("NAVIGATOR_ZOOM_OUT", locale), title: (0, i18n_1.tr)("NAVIGATOR_ZOOM_OUT", locale), coords: "25,142,8" }),
            React.createElement("area", { onClick: onZoomIn, shape: "circle", alt: (0, i18n_1.tr)("NAVIGATOR_ZOOM_IN", locale), title: (0, i18n_1.tr)("NAVIGATOR_ZOOM_IN", locale), coords: "25,34,8" })),
        React.createElement("img", { src: assets_1.IMG_SLIDER_SCALE, className: "png24", width: "51", height: "201", useMap: "#Navigator_ImageMap", style: { position: "absolute", left: 0, top: 0 } }),
        React.createElement("div", { style: { position: "absolute", top: 6, left: 6, width: 39, height: 16 } },
            React.createElement("img", { src: assets_1.GIF_SPINNER, className: "navigator-spinner", width: "18", height: "6", style: { position: "absolute", top: 3, right: 4, visibility: busy ? "visible" : "hidden" } })),
        React.createElement(react_draggable_1.default, { axis: "y", handle: "img.navigator-drag-handle", position: { x: 0, y: (VERT_START + pos) }, bounds: { top: VERT_START, bottom: (VERT_START + VERT_SPAN), left: 0, right: 0 }, onStart: onStart, onDrag: onDrag, onStop: onStop },
            React.createElement("div", null,
                React.createElement("img", { src: assets_1.IMG_SLIDER, className: "png24 navigator-drag-handle", width: "29", height: "12", style: { position: "relative", left: 11, top: 28 } }),
                (function () {
                    if (isDragging === true) {
                        var dragLabel = (0, i18n_1.tr)("FMT_NAVIGATOR_ZOOM_TO_SCALE", props.locale, { scale: calculateScaleForPos(previewPos).toFixed(2) });
                        return React.createElement("div", { className: "tooltip", style: { position: "relative", width: 170, right: 190, top: 28, textAlign: "right" } }, dragLabel);
                    }
                })())));
};
exports.Navigator = Navigator;
//# sourceMappingURL=navigator.js.map