"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = require("react");
const ui_1 = require("@skava/ui");
const ui_2 = require("@skava/ui");
const mobx_1 = require("xmobx/mobx");
const styleh_components_1 = require("styleh-components");
const mobx_react_1 = require("xmobx/mobx-react");
const validators_1 = require("../../validators");
// @todo !!!
const StyledErrorMessage = ui_1.Text;
const StyledLabel = ui_1.Text;
const StyledWrapper = styleh_components_1.styled.label ``;
const renderErrorMessage = (props) => {
    if (props.isValid) {
        return React.createElement(ui_1.Empty, { key: "textbox-error-message" });
    }
    else {
        return (React.createElement(StyledErrorMessage, { key: "textbox-error-message", content: 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);
            const isValid = this.props.state.validator(args);
            this.props.state.setIsValid(isValid);
        };
        this.handleBlur = () => {
            const value = this.props.state.value;
            const isValid = this.isValid
                ? this.props.state.validator(value)
                : this.props.state.validator();
            this.props.state.setIsValid(isValid);
        };
        this.handleFocus = () => {
            // this.props.state.setIsValid(true)
        };
    }
    static isSatisfiedByProps(props) {
        return props.type === 'select';
    }
    get isValid() {
        const options = this.props.state.attributes.options;
        const selectedValue = this.props.state.value;
        const hasSelected = options.some(item => selectedValue === item.value);
        return hasSelected;
    }
    render() {
        const _a = this.props, { 
        // remove label keep labelText?
        label, labelText = this.props.state.attributes.labelText, 
        // remove
        // wrapperClassName,
        // should name this properly
        options = this.props.state.attributes.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(StyledWrapper, { className: className },
            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.attributes.errorText,
            })));
        // can do renderWrap here if needed
        return view;
    }
};
SelectDropDownPlugin.defaultState = (inputState) => {
    return {
        validate: validators_1.isValidSelect,
    };
};
tslib_1.__decorate([
    mobx_1.computed
], SelectDropDownPlugin.prototype, "isValid", null);
SelectDropDownPlugin = tslib_1.__decorate([
    mobx_react_1.observer
], SelectDropDownPlugin);
exports.SelectDropDownPlugin = SelectDropDownPlugin;
exports.default = SelectDropDownPlugin;
//# sourceMappingURL=SelectDropDownPlugin.js.map