"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
const mobx_react_1 = require("mobx-react");
const React = require("react");
const PiLogging_1 = require("../../../util/PiLogging");
const Keys = require("../../../util/Keys");
const DropdownItem_1 = require("./DropdownItem");
const styles = require("../styles/DropdownComponent.scss");
const LOGGER = new PiLogging_1.PiLogger("DropdownComponent");
let DropdownComponent = class DropdownComponent extends React.Component {
    constructor(props) {
        super(props);
        this.setElement = (element) => {
            if (element) {
                this.element = element;
            }
        };
        this.renderDropdownOption = (option, index) => {
            const isSelected = option.id === this.props.selectedOptionId;
            return (React.createElement("div", { key: option.id },
                React.createElement(DropdownItem_1.DropdownItem, { onClick: this.selectOption, option: option, selected: isSelected })));
        };
        this.onKeyUp = (e) => {
            PiLogging_1.EVENT_LOG.info(this, "onKeyUp: " + e.key);
            if (e.keyCode === Keys.ESCAPE) {
                e.preventDefault();
                e.stopPropagation();
            }
        };
        this.selectOption = (option) => {
            LOGGER.info(this, "selectOption " + JSON.stringify(option));
            if (option && option.label !== undefined) {
                this.props.handleSelectedOption(option.id);
            }
        };
        if (this.props.selectedOptionId === "") {
            this.initOption();
        }
        LOGGER.info(this, "constructor");
    }
    initOption() {
        const options = this.props.getOptions();
        if (options.length > 0) {
            this.props.setSelectedOption(options[0].id);
        }
    }
    render() {
        LOGGER.info(this, "render");
        return (React.createElement("div", { className: styles.dropdown },
            React.createElement("div", { ref: this.setElement, tabIndex: 0, onKeyUp: this.onKeyUp, onKeyPress: this.onKeyUp }),
            React.createElement("div", { className: styles.popupWrapper }, this.renderDropdownOptions())));
    }
    renderDropdownOptions() {
        return React.createElement("div", { className: styles.popup }, this.props.getOptions().map(this.renderDropdownOption));
    }
    handleKeyDown(e) {
        LOGGER.info(this, "handleKeyDown " + e.key);
        const options = this.props.getOptions();
        const index = options.findIndex(o => o.id === this.props.selectedOptionId);
        switch (e.keyCode) {
            case Keys.ARROW_DOWN:
                if (index + 1 < options.length) {
                    this.props.setSelectedOption(options[index + 1].id);
                }
                return true;
            case Keys.ARROW_UP:
                if (index > 0) {
                    this.props.setSelectedOption(options[index - 1].id);
                }
                return true;
            case Keys.ENTER:
                if (index >= 0 && index < options.length) {
                    this.props.handleSelectedOption(options[index].id);
                    this.initOption();
                    return true;
                }
                else {
                    return false;
                }
            case Keys.DELETE:
                this.props.handleSelectedOption(null);
                return true;
            case Keys.ESCAPE:
                this.props.handleSelectedOption("ESCAPE");
                this.initOption();
                return true;
        }
        return false;
    }
};
DropdownComponent = __decorate([
    mobx_react_1.observer,
    __metadata("design:paramtypes", [Object])
], DropdownComponent);
exports.DropdownComponent = DropdownComponent;
//# sourceMappingURL=DropdownComponent.js.map