"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        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 extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BoardsToolBarItem = exports.BoardsDropDown = void 0;
var React = require("react");
var ReactDOM = require("react-dom");
var disposable_1 = require("@theia/core/lib/common/disposable");
var protocol_1 = require("../../common/protocol");
var boards_config_1 = require("./boards-config");
var arduino_commands_1 = require("../arduino-commands");
var boards_service_provider_1 = require("./boards-service-provider");
var BoardsDropDown = /** @class */ (function (_super) {
    __extends(BoardsDropDown, _super);
    function BoardsDropDown(props) {
        var _this = _super.call(this, props) || this;
        var list = document.getElementById('boards-dropdown-container');
        if (!list) {
            list = document.createElement('div');
            list.id = 'boards-dropdown-container';
            document.body.appendChild(list);
            _this.dropdownElement = list;
        }
        return _this;
    }
    BoardsDropDown.prototype.render = function () {
        return ReactDOM.createPortal(this.renderNode(), this.dropdownElement);
    };
    BoardsDropDown.prototype.renderNode = function () {
        var _this = this;
        var _a = this.props, coords = _a.coords, items = _a.items;
        if (coords === 'hidden') {
            return '';
        }
        return React.createElement("div", { className: 'arduino-boards-dropdown-list', style: __assign({ position: 'absolute' }, coords) },
            this.renderItem({
                label: 'Select Other Board & Port',
                onClick: function () { return _this.props.openBoardsConfig(); }
            }),
            items.map(function (_a) {
                var name = _a.name, port = _a.port, selected = _a.selected, onClick = _a.onClick;
                return ({ label: name + " at " + protocol_1.Port.toString(port), selected: selected, onClick: onClick });
            }).map(this.renderItem));
    };
    BoardsDropDown.prototype.renderItem = function (_a) {
        var label = _a.label, selected = _a.selected, onClick = _a.onClick;
        return React.createElement("div", { key: label, className: "arduino-boards-dropdown-item " + (selected ? 'selected' : ''), onClick: onClick },
            React.createElement("div", null, label),
            selected ? React.createElement("span", { className: 'fa fa-check' }) : '');
    };
    return BoardsDropDown;
}(React.Component));
exports.BoardsDropDown = BoardsDropDown;
var BoardsToolBarItem = /** @class */ (function (_super) {
    __extends(BoardsToolBarItem, _super);
    function BoardsToolBarItem(props) {
        var _this = _super.call(this, props) || this;
        _this.toDispose = new disposable_1.DisposableCollection();
        _this.show = function (event) {
            var element = event.currentTarget;
            if (element instanceof HTMLElement) {
                if (_this.state.coords === 'hidden') {
                    var rect = element.getBoundingClientRect();
                    _this.setState({
                        coords: {
                            top: rect.top,
                            left: rect.left,
                            width: rect.width,
                            paddingTop: rect.height
                        }
                    });
                }
                else {
                    _this.setState({ coords: 'hidden' });
                }
            }
            event.stopPropagation();
            event.nativeEvent.stopImmediatePropagation();
        };
        _this.openDialog = function () {
            _this.props.commands.executeCommand(arduino_commands_1.ArduinoCommands.OPEN_BOARDS_DIALOG.id);
            _this.setState({ coords: 'hidden' });
        };
        var availableBoards = props.boardsServiceClient.availableBoards;
        _this.state = {
            availableBoards: availableBoards,
            coords: 'hidden'
        };
        document.addEventListener('click', function () {
            _this.setState({ coords: 'hidden' });
        });
        return _this;
    }
    BoardsToolBarItem.prototype.componentDidMount = function () {
        var _this = this;
        this.props.boardsServiceClient.onAvailableBoardsChanged(function (availableBoards) { return _this.setState({ availableBoards: availableBoards }); });
    };
    BoardsToolBarItem.prototype.componentWillUnmount = function () {
        this.toDispose.dispose();
    };
    BoardsToolBarItem.prototype.render = function () {
        var _this = this;
        var _a = this.state, coords = _a.coords, availableBoards = _a.availableBoards;
        var boardsConfig = this.props.boardsServiceClient.boardsConfig;
        var title = boards_config_1.BoardsConfig.Config.toString(boardsConfig, { default: 'no board selected' });
        var decorator = (function () {
            var selectedBoard = availableBoards.find(function (_a) {
                var selected = _a.selected;
                return selected;
            });
            if (!selectedBoard || !selectedBoard.port) {
                return 'fa fa-times notAttached';
            }
            if (selectedBoard.state === boards_service_provider_1.AvailableBoard.State.guessed) {
                return 'fa fa-exclamation-triangle guessed';
            }
            return '';
        })();
        return React.createElement(React.Fragment, null,
            React.createElement("div", { className: 'arduino-boards-toolbar-item-container' },
                React.createElement("div", { className: 'arduino-boards-toolbar-item', title: title },
                    React.createElement("div", { className: 'inner-container', onClick: this.show },
                        React.createElement("span", { className: decorator }),
                        React.createElement("div", { className: 'label noWrapInfo' },
                            React.createElement("div", { className: 'noWrapInfo noselect' }, title)),
                        React.createElement("span", { className: 'fa fa-caret-down caret' })))),
            React.createElement(BoardsDropDown, { coords: coords, items: availableBoards.filter(boards_service_provider_1.AvailableBoard.hasPort).map(function (board) { return (__assign(__assign({}, board), { onClick: function () {
                        if (board.state === boards_service_provider_1.AvailableBoard.State.incomplete) {
                            _this.props.boardsServiceClient.boardsConfig = {
                                selectedPort: board.port
                            };
                            _this.openDialog();
                        }
                        else {
                            _this.props.boardsServiceClient.boardsConfig = {
                                selectedBoard: board,
                                selectedPort: board.port
                            };
                        }
                    } })); }), openBoardsConfig: this.openDialog }));
    };
    return BoardsToolBarItem;
}(React.Component));
exports.BoardsToolBarItem = BoardsToolBarItem;
//# sourceMappingURL=boards-toolbar-item.js.map