"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var _ = require("lodash");
var React = require("react");
var ReactDOM = require("react-dom");
var styled_components_1 = require("styled-components");
var uuid = require("uuid");
var xterm_1 = require("xterm");
var fit_1 = require("xterm/dist/addons/fit/fit");
var theme_1 = require("../theme");
var Grid_1 = require("./Grid");
var defaultXtermStyle = "\n\t.xterm {\n\t\tfont-family: courier-new, courier, monospace;\n\t\tfont-feature-settings: \"liga\" 0;\n\t\tposition: relative;\n\t\tuser-select: none;\n\t\t-ms-user-select: none;\n\t\t-webkit-user-select: none;\n\t}\n\n\t.xterm.focus,\n\t.xterm:focus {\n\t\toutline: none;\n\t}\n\n\t.xterm .xterm-helpers {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\t/**\n\t\t * The z-index of the helpers must be higher than the canvases in order for\n\t\t * IMEs to appear on top.\n\t\t */\n\t\tz-index: 10;\n\t}\n\n\t.xterm .xterm-helper-textarea {\n\t\t/*\n\t\t * HACK: to fix IE's blinking cursor\n\t\t * Move textarea out of the screen to the far left, so that the cursor is not visible.\n\t\t */\n\t\tposition: absolute;\n\t\topacity: 0;\n\t\tleft: -9999em;\n\t\ttop: 0;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tz-index: -10;\n\t\t/** Prevent wrapping so the IME appears against the textarea at the correct position */\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\tresize: none;\n\t}\n\n\t.xterm .composition-view {\n\t\t/* TODO: Composition position got messed up somewhere */\n\t\tbackground: #000;\n\t\tcolor: #FFF;\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\twhite-space: nowrap;\n\t\tz-index: 1;\n\t}\n\n\t.xterm .composition-view.active {\n\t\tdisplay: block;\n\t}\n\n\t.xterm .xterm-viewport {\n\t\t/* On OS X this is required in order for the scroll bar to appear fully opaque */\n\t\tbackground-color: #000;\n\t\toverflow-y: scroll;\n\t\tcursor: default;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t}\n\n\t.xterm .xterm-screen {\n\t\tposition: relative;\n\t}\n\n\t.xterm .xterm-screen canvas {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t}\n\n\t.xterm .xterm-scroll-area {\n\t\tvisibility: hidden;\n\t}\n\n\t.xterm .xterm-char-measure-element {\n\t\tdisplay: inline-block;\n\t\tvisibility: hidden;\n\t\tposition: absolute;\n\t\tleft: -9999em;\n\t}\n\n\t.xterm.enable-mouse-events {\n\t\t/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */\n\t\tcursor: default;\n\t}\n\n\t.xterm:not(.enable-mouse-events) {\n\t\tcursor: text;\n\t}\n";
var TtyContainer = styled_components_1.default(Grid_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tposition: relative;\n\theight: 100%;\n\n\t", "\n\n\t.xterm-viewport::-webkit-scrollbar-track {\n\t\tbackground-color: transparent\n\t\tborder-bottom-right-radius: 0;\n\t}\n\n\t.xterm-viewport::-webkit-scrollbar {\n\t\twidth: 10px;\n\t\tbackground-color: transparent;\n\t\tborder-radius: 0;\n\t}\n\n\t.xterm-viewport::-webkit-scrollbar-thumb {\n\t\tbackground-color: #e9e9e9;\n\t}\n"], ["\n\tposition: relative;\n\theight: 100%;\n\n\t", "\n\n\t.xterm-viewport::-webkit-scrollbar-track {\n\t\tbackground-color: transparent\n\t\tborder-bottom-right-radius: 0;\n\t}\n\n\t.xterm-viewport::-webkit-scrollbar {\n\t\twidth: 10px;\n\t\tbackground-color: transparent;\n\t\tborder-radius: 0;\n\t}\n\n\t.xterm-viewport::-webkit-scrollbar-thumb {\n\t\tbackground-color: #e9e9e9;\n\t}\n"])), defaultXtermStyle);
var TtyInner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n"], ["\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n"])));
var Terminal = (function (_super) {
    __extends(Terminal, _super);
    function Terminal(props) {
        var _this = _super.call(this, props) || this;
        var termConfig = _.assign({}, props.config, {
            cols: 80,
            cursorBlink: false,
            rows: 24,
            useStyle: true,
            fontFamily: theme_1.default.monospace,
            lineHeight: 1.4,
            theme: {
                background: '#343434',
                cursor: props.nonInteractive ? '#343434' : undefined,
            },
        });
        _this.tty = _this.props.ttyInstance || new xterm_1.Terminal(termConfig);
        _this.mountElementId = "terminal-" + uuid.v1();
        _this.resize = _this.resize.bind(_this);
        return _this;
    }
    Terminal.prototype.componentDidMount = function () {
        var _this = this;
        this.open();
        setTimeout(function () {
            if (_this.props.nonInteractive && document.execCommand) {
                _this.tty.attachCustomKeyEventHandler(function (e) {
                    if (e.ctrlKey && e.keyCode === 67) {
                        document.execCommand('copy');
                        return false;
                    }
                    return true;
                });
            }
            window.addEventListener('resize', _this.resize);
            _this.resize();
        }, 100);
    };
    Terminal.prototype.componentWillUnmount = function () {
        window.removeEventListener('resize', this.resize);
        this.tty.destroy();
    };
    Terminal.prototype.destroy = function () {
        window.removeEventListener('resize', this.resize);
        if (!this.props.ttyInstance) {
            this.tty.destroy();
        }
    };
    Terminal.prototype.open = function () {
        var rootElement = ReactDOM.findDOMNode(this);
        var element = rootElement.querySelector("#" + this.mountElementId);
        this.tty.open(element);
        this.tty.focus();
    };
    Terminal.prototype.resize = function () {
        fit_1.fit(this.tty);
    };
    Terminal.prototype.clear = function () {
        this.tty.clear();
    };
    Terminal.prototype.writeln = function (line) {
        this.tty.writeln(line);
    };
    Terminal.prototype.write = function (text) {
        this.tty.write(text);
    };
    Terminal.prototype.render = function () {
        return (React.createElement(TtyContainer, { color: this.props.color },
            React.createElement(TtyInner, { id: this.mountElementId })));
    };
    return Terminal;
}(React.Component));
exports.default = Terminal;
var templateObject_1, templateObject_2;
