"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.mmWave = void 0;
var morphux_1 = require("morphux");
var MAPPING_CORNER_COLOR = '#f00';
var MAPPING_LINE_COLOR = '#9c0000ff';
var mmWave = /** @class */ (function () {
    function mmWave(Main) {
        this.container = document.querySelector('.ntsh_mmwave-container');
        this.nodes = this.container.querySelector('.ntsh_mmwave-nodes');
        this.lines = this.container.querySelector('.ntsh_mmwave-lines');
        this.linesContext = this.lines.getContext('2d');
        this._Main = Main;
        this.registerListeners();
    }
    mmWave.prototype.registerListeners = function () {
        var _this = this;
        console.log('Registering mmWave listeners');
        this._Main.socket.on('mmwaveROI', function (roi) {
            _this.roi = roi;
            _this.updateROI();
        });
        this._Main.socket.on('mmwaveMapping', function (mapping) {
            _this.mapping = mapping;
            _this.setMappingCorners();
        });
        // this._Main.socket.on('mmwaveTracks', (tracks: Track[]) => {
        // 	this.updateTracks(tracks);
        // });
        this._Main.socket.on('mmwavePoints', function (mappedPoints) {
            _this.updateTracks(mappedPoints);
        });
        this.container.onclick = function (e) {
            var rect = _this.container.getBoundingClientRect();
            var scaleX = _this.container.clientWidth / rect.width;
            var scaleY = _this.container.clientHeight / rect.height;
            var x = (e.clientX - rect.left) * scaleX;
            var y = (e.clientY - rect.top) * scaleY;
            var xPercentage = (x / _this.container.clientWidth) * 100;
            var yPercentage = (y / _this.container.clientHeight) * 100;
            var roiPos = _this.toROI(xPercentage, yPercentage);
            console.log(roiPos);
        };
        window.addEventListener('resize', function () { return _this.scale(); });
    };
    mmWave.prototype.updateTracks = function (mappedPoints) {
        var _this = this;
        if (this.roi == null)
            return;
        mappedPoints.forEach(function (_a) {
            var track = _a.track, mapped = _a.mapped;
            var trackPoint = _this.nodes.querySelector(".ntsh_mmwave-track[trackid=\"".concat(track.trackId, "\"]"));
            var trackLabel = trackPoint === null || trackPoint === void 0 ? void 0 : trackPoint.querySelector('.ntsh_mmwave-label');
            if (trackPoint == null) {
                trackPoint = (0, morphux_1.ce)('div', 'ntsh_mmwave-track', {
                    trackid: track.trackId,
                });
                trackPoint.appendChild((0, morphux_1.ce)('div', 'ntsh_mmwave-track-cross'));
                trackPoint.appendChild((0, morphux_1.ce)('div', 'ntsh_mmwave-track-cross'));
                trackLabel = (0, morphux_1.ce)('div', 'ntsh_mmwave-label');
                trackPoint.appendChild(trackLabel);
                _this.nodes.appendChild(trackPoint);
                trackPoint.animate({
                    opacity: [0, 1],
                }, { duration: 200 });
            }
            var _b = _this.toPercentage(track.x, track.y), xPercentage = _b.xPercentage, yPercentage = _b.yPercentage;
            trackPoint.style.left = "".concat(xPercentage, "%");
            trackPoint.style.top = "".concat(yPercentage, "%");
            if (mapped == null)
                return trackPoint.classList.add('ntsh_mmwave-track-outside');
            trackPoint.classList.remove('ntsh_mmwave-track-outside');
            trackLabel.innerHTML = '';
            trackLabel.appendChild((0, morphux_1.ce)('span', 'ntsh_mmwave-label-id', null, track.trackId.toString()));
            trackLabel.appendChild((0, morphux_1.ce)('span', null, null, "".concat(Math.round(mapped.x), "%, ").concat(Math.round(mapped.y), "%")));
        });
        var trackIds = mappedPoints.map(function (t) { return t.track.trackId; });
        this.nodes
            .querySelectorAll('.ntsh_mmwave-track')
            .forEach(function (trackPoint) {
                var trackId = parseInt(trackPoint.getAttribute('trackid'));
                if (trackIds.includes(trackId))
                    return;
                trackPoint.animate({
                    opacity: 0,
                }, { duration: 200 }).onfinish = function () {
                    trackPoint.remove();
                };
            });
    };
    mmWave.prototype.updateROI = function () {
        if (this.roi == null)
            return;
        var xDif = Math.abs(this.roi.x[1] - this.roi.x[0]);
        var yDif = Math.abs(this.roi.y[1] - this.roi.y[0]);
        var height = (1920 / xDif) * yDif;
        this.container.style.minWidth = "1920px";
        this.container.style.minHeight = "".concat(height, "px");
        this.lines.height = height;
        this.lines.width = 1920;
        this.scale();
    };
    mmWave.prototype.setMappingCorners = function () {
        if (this.mapping == null)
            return;
        this.nodes
            .querySelectorAll('.ntsh_mmwave-corner')
            .forEach(function (el) { return el.remove(); });
        var tl = this.addCorner(this.mapping.topLeft.x, this.mapping.topLeft.y, 'tl');
        var tr = this.addCorner(this.mapping.topRight.x, this.mapping.topRight.y, 'tr');
        var bl = this.addCorner(this.mapping.bottomLeft.x, this.mapping.bottomLeft.y, 'bl');
        var br = this.addCorner(this.mapping.bottomRight.x, this.mapping.bottomRight.y, 'br');
        this.linesContext.clearRect(0, 0, this.lines.width, this.lines.height);
        this.linesContext.strokeStyle = MAPPING_LINE_COLOR;
        this.linesContext.lineWidth = 2;
        this.linesContext.beginPath();
        this.linesContext.moveTo((tl.xPercentage / 100) * this.lines.width, (tl.yPercentage / 100) * this.lines.height);
        this.linesContext.lineTo((tr.xPercentage / 100) * this.lines.width, (tr.yPercentage / 100) * this.lines.height);
        this.linesContext.lineTo((br.xPercentage / 100) * this.lines.width, (br.yPercentage / 100) * this.lines.height);
        this.linesContext.lineTo((bl.xPercentage / 100) * this.lines.width, (bl.yPercentage / 100) * this.lines.height);
        this.linesContext.closePath();
        this.linesContext.stroke();
    };
    mmWave.prototype.addCorner = function (x, y, corner) {
        var cornerPoint = (0, morphux_1.ce)('div', [
            'ntsh_mmwave-corner',
            "ntsh_mmwave-corner-".concat(corner),
        ]);
        cornerPoint.style.setProperty('--sn-mmwave-corner-color', MAPPING_CORNER_COLOR);
        cornerPoint.appendChild((0, morphux_1.ce)('div', 'ntsh_mmwave-corner-cross'));
        cornerPoint.appendChild((0, morphux_1.ce)('div', 'ntsh_mmwave-corner-cross'));
        var position = this.toPercentage(x, y);
        cornerPoint.style.left = "".concat(position.xPercentage, "%");
        cornerPoint.style.top = "".concat(position.yPercentage, "%");
        cornerPoint.appendChild((0, morphux_1.ce)('div', 'ntsh_mmwave-label', null, "".concat(x, ", ").concat(y)));
        this.nodes.appendChild(cornerPoint);
        return position;
    };
    mmWave.prototype.toPercentage = function (x, y) {
        var xPercentage = ((x - this.roi.x[0]) / (this.roi.x[1] - this.roi.x[0])) * 100;
        var yPercentage = ((y - this.roi.y[0]) / (this.roi.y[1] - this.roi.y[0])) * 100;
        return { xPercentage: xPercentage, yPercentage: yPercentage };
    };
    mmWave.prototype.toROI = function (xPercentage, yPercentage) {
        var x = this.roi.x[0] +
            (xPercentage / 100) * (this.roi.x[1] - this.roi.x[0]);
        var y = this.roi.y[0] +
            (yPercentage / 100) * (this.roi.y[1] - this.roi.y[0]);
        return { x: x, y: y };
    };
    mmWave.prototype.scale = function () {
        var elementWidth = this.container.clientWidth;
        var elementHeight = this.container.clientHeight;
        var parentWidth = this.container.parentElement.clientWidth;
        var parentHeight = this.container.parentElement.clientHeight;
        var ratioWidth = parentWidth / elementWidth;
        var ratioHeight = parentHeight / elementHeight;
        var ratio = elementHeight * ratioWidth > parentHeight
            ? ratioHeight
            : ratioWidth;
        this.container.style.transform = "scale(".concat(ratio, ")");
    };
    return mmWave;
}());
exports.mmWave = mmWave;
//# sourceMappingURL=mmWave.js.map