"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const mobx_react_1 = require("xmobx/mobx-react");
const utils_1 = require("@skava/utils");
const exotic_1 = require("exotic");
const forms_1 = require("src/forms");
const SelectDropDown_1 = require("molecules/SelectDropDown");
const deps_1 = require("src/forms/deps");
const InputChain_1 = require("../../../InputChain");
const styled_1 = require("./styled");
let SelectBoxInput = class SelectBoxInput extends InputChain_1.InputChain {
    constructor() {
        super(...arguments);
        this.validateSelectField = args => {
            const state = this.get('state');
            if (forms_1.isValidSelect(args)) {
                state.isValidInput = true;
            }
            else {
                state.errorMessage = deps_1.errorMessage(state.errorMessageFor);
                state.isValidInput = false;
            }
        };
        this.handleChange = args => {
            const { onDropdownChange } = this.get('props');
            const state = this.get('state');
            const { label } = state;
            if (exotic_1.isFunction(onDropdownChange)) {
                onDropdownChange({ value: args, state });
            }
            this.validateSelectField({ value: args, label });
            state.setValue(args);
            // console.log('[Forms/SelectDropdown] handleDropdownChange()', args, state)
        };
        this.handleBlur = () => {
            const { value, label } = this.get('state');
            this.validateSelectField({ value, label });
            // console.log('[Forms/SelectDropdown] handleDropdownBlur()', state)
        };
        this.handleFocus = () => {
            const state = this.get('state');
            state.isValidInput = true;
            // console.log('[Forms/SelectDropdown] handleDropdownFocus()')
        };
    }
    static isSatisfiedByProps(props) {
        return props.type === 'select';
    }
    render() {
        const props = this.get('props');
        const state = this.get('state');
        const { label, labelText, wrapperClassName, options, className } = props, remainingProps = tslib_1.__rest(props, ["label", "labelText", "wrapperClassName", "options", "className"]);
        const renderActiveItem = (props, state) => {
            const passThroughProps = utils_1.omit(props, ['label']);
            return react_1.default.createElement(SelectDropDown_1.ActiveOption, Object.assign({ state: state }, passThroughProps));
        };
        const errorMessageView = state.isValidInput === false && (react_1.default.createElement(styled_1.StyledErrorMessage, { key: "textbox-error-message", text: state.errorMessage, className: 'input-error-message' }));
        const attributes = Object.assign({ options, className: `${className}${state.isValidInput ? '' : ' input-error'}`, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, renderActiveItem }, remainingProps);
        console.info(attributes);
        return (react_1.default.createElement(styled_1.SelectBoxWrapper, { className: wrapperClassName },
            react_1.default.createElement(styled_1.StyledLabel, { className: 'label-text', content: labelText }),
            react_1.default.createElement(SelectDropDown_1.SelectDropDown, Object.assign({}, attributes, { "data-qa": props.dataQa })),
            errorMessageView));
    }
};
SelectBoxInput = tslib_1.__decorate([
    mobx_react_1.observer
], SelectBoxInput);
exports.SelectBoxInput = SelectBoxInput;
exports.default = SelectBoxInput;
//# sourceMappingURL=SelectBoxInput.js.map