"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Renderables_1 = require("../Renderables");
var node_1 = require("../../support/node");
var Scanner_1 = require("./Scanner");
var Navigator_1 = require("../../support/Navigator");
var Canvas_1 = require("../../support/Canvas");
var Specification_1 = require("../../support/Specification");
/**
 * Implementation of the 'codeReader' markup element.
 * Creates an HTML canvas element that allows the scanning of
 * media elements using a media stream e.g. QR codes @see {@link Scanner}
 * The class lto-code-reader is added to allow CSS
 * manipulations.
 *
 * @see {@link IRenderable}
 */
var CodeReader = /** @class */ (function () {
    function CodeReader(message) {
        this.maxCanvasSize = 640;
        this.spec = message;
    }
    /**
     * @inheritDoc
     */
    CodeReader.prototype.render = function (renderer, isNested) {
        var wrapper = node_1.default("div");
        var video = node_1.default("video");
        var canvas = node_1.default("canvas");
        var controlWrapper = node_1.default("div");
        var resetButton = node_1.default("div");
        var successLabel = node_1.default("div");
        new Specification_1.Specification(this.spec).initNode(wrapper, "lto-conde-reader");
        resetButton.addClasses("lto-reset-button", "lto-disabled");
        successLabel.addClasses("lto-read-success");
        controlWrapper.appendChild(resetButton);
        wrapper.appendChild(video);
        wrapper.appendChild(canvas);
        wrapper.appendChild(controlWrapper);
        wrapper.appendChild(successLabel);
        this.initCamera(wrapper);
        return wrapper.unwrap();
    };
    CodeReader.prototype.initCamera = function (wrapper) {
        var _this = this;
        var video = wrapper.find("video").unwrap();
        var canvas = wrapper.find("canvas");
        wrapper.removeClasses("lto-not-available");
        var userMedia = Navigator_1.Navigator.getUserVideoMedia();
        if (userMedia == null)
            return;
        userMedia.then(function (mediaStream) {
            _this.mediaStream = mediaStream;
            video.srcObject = _this.mediaStream;
            _this.mediaStream.getVideoTracks();
            video.play()
                .then(function () {
                if (!video.classList.contains("lto-active"))
                    video.classList.add("lto-active");
                canvas.removeClasses("lto-active");
                _this.activateScanner(wrapper);
            });
        }).catch(function (error) {
            console.error(error);
            video.classList.remove("lto-active");
            canvas.removeClasses("lto-active");
            wrapper.addClasses("lto-not-available");
        });
    };
    CodeReader.disableResetButton = function (wrapper) {
        var resetButton = wrapper.find(".lto-reset-button");
        if (resetButton) {
            resetButton.removeClasses("lto-active");
            resetButton.addClasses("lto-disabled");
        }
    };
    CodeReader.prototype.activateResetButton = function (wrapper) {
        var _this = this;
        var resetButton = wrapper.find(".lto-reset-button");
        var successLabel = wrapper.find(".lto-read-success");
        if (!resetButton)
            return;
        resetButton.removeClasses("lto-disabled");
        resetButton.addClasses("lto-active");
        resetButton.onClick(function () {
            wrapper.removeClasses("lto-success");
            wrapper.removeAttributes("value");
            successLabel.innerText("");
            CodeReader.disableResetButton(wrapper);
            _this.initCamera(wrapper);
        });
    };
    CodeReader.prototype.publishResult = function (wrapper, result) {
        var _this = this;
        if (result !== null) {
            result.then(function (result) {
                var text = result.getText();
                var successLabel = wrapper.find(".lto-read-success");
                if (successLabel) {
                    successLabel.innerText(text);
                }
                wrapper.addClasses("lto-success");
                wrapper.addAttributes({ value: text });
                _this.activateResetButton(wrapper);
                _this.stopCamera(wrapper);
            }).catch(function (reason) { return console.error(reason); });
        }
        else {
            console.error("Result is null");
        }
    };
    CodeReader.prototype.activateScanner = function (wrapper) {
        var _this = this;
        var video = wrapper.find("video");
        CodeReader.getDeviceId(video).then(function (deviceId) {
            wrapper.removeClasses("lto-success");
            switch (_this.spec.format) {
                case "qr":
                    _this.publishResult(wrapper, Scanner_1.Scanner.scanQRCodeFromDevice(deviceId));
                    break;
                case "bar":
                    _this.publishResult(wrapper, Scanner_1.Scanner.scanBarCodeFromDevice(deviceId));
                    break;
                default:
                    console.error("Format: " + _this.spec.format + " is not supported");
            }
        }).catch(function (reason) { return console.error(reason); });
    };
    CodeReader.prototype.stopCamera = function (wrapper) {
        var video = wrapper.find("video");
        video.removeClasses("lto-active");
        var canvas = wrapper.find("canvas");
        canvas.addClasses("lto-active");
        Canvas_1.drawCanvas(canvas.unwrap(), video.unwrap(), this.mediaStream || new MediaStream(), this.maxCanvasSize);
        this.mediaStream.getTracks().forEach(function (track) { return track.stop(); });
    };
    CodeReader.getDeviceId = function (node) {
        var htmlVideoElement = node.unwrap();
        return new Promise(function (resolve) {
            htmlVideoElement.srcObject.getVideoTracks().forEach(function (track) {
                return navigator.mediaDevices.enumerateDevices().then(function (value) {
                    return value.forEach(function (e) {
                        if (e.label === track.label)
                            resolve(e.deviceId);
                    });
                });
            });
        });
    };
    return CodeReader;
}());
exports.CodeReader = CodeReader;
Renderables_1.default.register("codereader", CodeReader);
//# sourceMappingURL=index.js.map