"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 __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const mobx_react_1 = require("xmobx/mobx-react");
const exotic_1 = require("exotic");
const SelectionState_1 = require("state/SelectionState");
const _deps_1 = require("../meta/_deps");
const Option_1 = require("../Option");
const ActiveOption_1 = require("../ActiveOption");
const _styled_1 = require("./_styled");
const SelectBoundary_1 = require("./SelectBoundary");
const _renderProps_1 = require("./_renderProps");
let Select = class Select extends react_1.default.Component {
    constructor() {
        super(...arguments);
        this.observableState = new SelectionState_1.SelectionState();
        this.handleChange = (event, item, state) => {
            console.debug('[adm:Select] handleChange()');
            this.observableState.handleToggleVisibility();
            if (exotic_1.isFunction(this.props.onChange)) {
                console.info('[adm:Select] onChange passed in');
                this.props.onChange(event, item, state);
            }
            else {
                console.warn('[adm:Select] had no onChangeProp');
            }
            this.observableState.setIsVisible(false);
        };
    }
    handleDecoratingList() {
        const onChange = this.handleChange;
        const props = Object.assign({}, this.props, { onChange });
        console.debug('[Select] handleDecoratingList()');
        console.dir(props);
        this.observableState.decorateWithProps(props);
    }
    // maybe should be didMount?
    componentWillMount() {
        this.handleDecoratingList();
    }
    componentWillReact() {
        if (SelectionState_1.isEveryItemInListDecoratedWithOnClick(this.props) === false) {
            this.handleDecoratingList();
        }
    }
    render() {
        // computed & stateful
        const { props, observableState } = this;
        const list = _deps_1.toList(props);
        const { isVisible, handleToggleVisibility } = observableState;
        const { 
        /**
         * @see https://www.typescriptlang.org/play/#src=const%20obj%20%3D%20%7B%7D%0D%0Aconst%20%7B%0D%0A%20%20defaulted%20%3D%20()%20%3D%3E%20'eh'%2C%0D%0A%7D%20%3D%20obj
         * @description inline `hide`
         * @todo probably should make a function that is the default for this
         *       and pass in props + observable state
         */
        onClickOutside = () => observableState.setIsVisible(false), renderList, renderActiveItem, isDisabled, className, shouldBeAbsolute, dropDownAlignmentType, } = props;
        const listView = renderList(Object.assign({}, this.props, { list }), this.observableState);
        // @todo improve, add to typings
        const activeProps = Object.assign({}, observableState.selectedItem, props, observableState, { onClick: handleToggleVisibility });
        const activeView = renderActiveItem(activeProps, observableState);
        // @todo TOO MANY PROPS PASSING THROUGH FOR LAYOUT
        // THIS IS WHY WE HAVE PRESETS
        const optionListView = (react_1.default.createElement(_styled_1.StyledOptionList, { list: list, children: listView, isVisible: isVisible, shouldBeAbsolute: shouldBeAbsolute, dropDownAlignmentType: dropDownAlignmentType }));
        // @todo - WHAT IS THIS?!!?!?!?!?!!?!? THIS IS A PRESET MOVE IT OUT
        // we can also EASILY style this
        const renderDropDownList = (item) => {
            switch (item) {
                case 'top':
                    return (react_1.default.createElement(react_1.default.Fragment, null,
                        optionListView,
                        activeView));
                case 'bottom':
                default:
                    return (react_1.default.createElement(react_1.default.Fragment, null,
                        activeView,
                        optionListView));
            }
        };
        return (react_1.default.createElement(SelectBoundary_1.SelectBoundary, { className: className, onClickOutside: onClickOutside, isDisabled: isDisabled, isVisible: isVisible }, renderDropDownList(dropDownAlignmentType)));
    }
};
Select.defaultProps = {
    renderList: _renderProps_1.renderList,
    renderItem: Option_1.renderItem,
    renderActiveItem: ActiveOption_1.renderActiveItem,
    shouldBeAbsolute: false,
    dropDownAlignmentType: false,
};
Select = __decorate([
    mobx_react_1.observer
], Select);
exports.Select = Select;
exports.default = Select;
//# sourceMappingURL=Select.js.map