"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = require("react");
const ui_1 = require("@skava/ui");
const mobx_react_1 = require("xmobx/mobx-react");
const validators_1 = require("../../validators");
const ui_2 = require("@skava/ui");
// @todo !!!
const StyledErrorMessage = ui_1.Text;
const StyledLabel = ui_1.Text;
const renderErrorMessage = (props) => (React.createElement(StyledErrorMessage, { key: "textbox-error-message", text: props.errorText, className: 'input-error-message' }));
const renderLabel = (props) => {
    return React.createElement(StyledLabel, { className: 'label-text', content: props.labelText });
};
const renderSelectDropDown = (props) => {
    return React.createElement(ui_2.SelectDropDown, Object.assign({}, props));
};
let SelectDropDownPlugin = class SelectDropDownPlugin extends React.Component {
    constructor() {
        super(...arguments);
        /**
         * @todo !!! these 3 are good examples of why we need validation strategy
         */
        this.handleChange = (args) => {
            this.props.state.setValue(args);
        };
        this.handleBlur = () => {
            // this.props.state.validator()
        };
        this.handleFocus = () => {
            // this.props.state.setIsValid(true)
        };
    }
    static isSatisfiedByProps(props) {
        return props.type === 'select';
    }
    render() {
        const _a = this.props, { 
        // remove label keep labelText?
        label, labelText, 
        // remove
        // wrapperClassName,
        // should name this properly
        options, 
        // should not support classNames in form config...
        className, 
        // remove
        dataQa } = _a, 
        // removing state
        // state,
        remainingProps = tslib_1.__rest(_a, ["label", "labelText", "options", "className", "dataQa"]);
        // remove state right now...
        const { state } = remainingProps;
        const view = (React.createElement(React.Fragment, null,
            renderLabel({
                labelText,
            }),
            renderSelectDropDown(Object.assign({ list: options, options: options, 
                // onChange: this.handleChange,
                // onBlur: this.handleBlur,
                // onFocus: this.handleFocus,
                // aria
                'aria-invalid': state.isValid === false, 
                // should not need this
                'data-qa': dataQa }, remainingProps)),
            renderErrorMessage({
                isValid: state.isValid,
                errorText: state.errorText,
            })));
        // can do renderWrap here if needed
        return view;
    }
};
SelectDropDownPlugin.defaultState = (inputState) => {
    return {
        validate: validators_1.isValidSelect,
    };
};
SelectDropDownPlugin = tslib_1.__decorate([
    mobx_react_1.observer
], SelectDropDownPlugin);
exports.SelectDropDownPlugin = SelectDropDownPlugin;
exports.default = SelectDropDownPlugin;
//# sourceMappingURL=SelectDropDownPlugin.js.map