import { __assign } from "tslib";
import { withThemeableProps } from '../../useThemeable';
import { classNamesFunction, KeyCodes } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { IconButton } from '../Button';
import { Icon } from '../Icon';
var getClassNames = classNamesFunction();
var refs = {
    input: 'input',
};
export var SearchBoxBase = Vue.extend({
    name: 'SearchBoxBase',
    inheritAttrs: false,
    props: __assign(__assign({}, withThemeableProps()), { underlined: { type: Boolean, default: false }, defaultValue: { type: String, default: null }, placeholder: { type: String, default: 'Search' }, value: { type: String, default: null }, disableAnimation: { type: Boolean, default: false }, showIcon: { type: Boolean, default: false }, iconProps: { type: Object, default: function () { } }, disabled: { type: Boolean, default: false } }),
    data: function () {
        var _a;
        return {
            hasFocus: false,
            internalValue: (_a = this.value) !== null && _a !== void 0 ? _a : '',
        };
    },
    computed: {
        classNames: function () {
            var _a = this, styles = _a.styles, theme = _a.theme, underlined = _a.underlined, disabled = _a.disabled, hasFocus = _a.hasFocus, showIcon = _a.showIcon, className = _a.className, disableAnimation = _a.disableAnimation, internalValue = _a.internalValue;
            return getClassNames(styles, {
                theme: theme,
                className: className,
                underlined: underlined,
                hasFocus: hasFocus,
                disabled: disabled,
                hasInput: internalValue.length > 0,
                disableAnimation: disableAnimation,
                showIcon: showIcon,
            });
        },
    },
    watch: {
        value: function (newValue) {
            this.internalValue = newValue;
        },
        internalValue: function (value) {
            this.$emit('input', value);
            this.$emit('change', value);
        },
    },
    methods: {
        onKeyDown: function (ev) {
            switch (ev.which) {
                case KeyCodes.escape:
                    this.$emit('escape', ev);
                    if (ev.defaultPrevented)
                        return;
                    else
                        this.clearInput();
                    break;
                case KeyCodes.enter:
                    this.$emit('search', this.internalValue);
                    return;
                default:
                    if (!ev.defaultPrevented) {
                        return;
                    }
            }
            // We only get here if the keypress has been handled,
            // or preventDefault was called in case of default keyDown handler
            ev.preventDefault();
            ev.stopPropagation();
        },
        submit: function () {
            this.$emit('search', this.internalValue);
        },
        onEscape: function (e) {
            this.$emit('escape', e);
            if (e.defaultPrevented)
                return;
            this.clearInput();
        },
        clearInput: function (e) {
            this.$emit('clear', e);
            if (e && e.defaultPrevented)
                return;
            this.internalValue = '';
            this.$refs.input.focus();
        },
        onFocus: function (e) {
            this.$emit('focus', e);
            if (e.defaultPrevented)
                return;
            this.hasFocus = true;
        },
        onBlur: function (e) {
            this.$emit('blur', e);
            if (e.defaultPrevented)
                return;
            this.hasFocus = false;
        },
        onInput: function (e) {
            this.internalValue = e.target.value;
        },
    },
    render: function (h) {
        var _a = this, classNames = _a.classNames, disabled = _a.disabled, internalValue = _a.internalValue, placeholder = _a.placeholder, iconProps = _a.iconProps;
        return h('div', { class: classNames.root }, [
            h('div', { class: classNames.iconContainer }, [
                h(Icon, { class: classNames.icon, props: __assign({ iconName: 'Search' }, iconProps) }),
            ]),
            h('input', {
                ref: refs.input,
                class: classNames.field,
                domProps: __assign(__assign({ disabled: disabled, value: internalValue }, this.$attrs), { 'aria-label': placeholder, placeholder: placeholder }),
                on: {
                    input: this.onInput,
                    focus: this.onFocus,
                    blur: this.onBlur,
                    keydown: this.onKeyDown,
                },
            }),
            internalValue && h('div', { class: classNames.clearButton }, [
                h(IconButton, {
                    props: {
                        styles: { root: { height: 'auto' }, icon: { fontSize: '12px' } },
                        iconProps: { iconName: 'Clear' },
                    },
                    on: { click: this.clearInput },
                }),
            ]),
        ]);
    },
});
//# sourceMappingURL=SearchBox.base.js.map