import { __decorate, __extends, __metadata, __spreadArray } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import BaseComponent from '../BaseComponent';
import { Icon } from '../Icon';
import { Label } from '../Label';
import { Callout } from '../Callout';
import { ActionButton } from '../Button';
import { Checkbox } from '../Checkbox';
import { classNamesFunction } from '@uifabric-vue/utilities';
var getClassNames = classNamesFunction();
var DropdownBase = /** @class */ (function (_super) {
    __extends(DropdownBase, _super);
    function DropdownBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.isOpen = false;
        _this.calloutRenderEdge = undefined;
        return _this;
    }
    Object.defineProperty(DropdownBase.prototype, "classNames", {
        get: function () {
            var _a = this, theme = _a.theme, className = _a.className, errorMessage = _a.errorMessage, label = _a.label, required = _a.required, disabled = _a.disabled, panelProps = _a.panelProps, calloutProps = _a.calloutProps;
            var _b = this, isOpen = _b.isOpen, calloutRenderEdge = _b.calloutRenderEdge;
            var selectedOptions = this.value;
            return getClassNames(this.styles, {
                theme: theme,
                className: className,
                hasError: !!(errorMessage && errorMessage.length > 0),
                hasLabel: !!label,
                isOpen: isOpen,
                required: required,
                disabled: disabled,
                isRenderingPlaceholder: !selectedOptions.length,
                panelClassName: panelProps === null || panelProps === void 0 ? void 0 : panelProps.className,
                calloutClassName: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.className,
                calloutRenderEdge: calloutRenderEdge,
            });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(DropdownBase.prototype, "multiSelectItemStyles", {
        get: function () {
            return this.classNames.subComponentStyles
                ? this.classNames.subComponentStyles.multiSelectItem
                : undefined;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(DropdownBase.prototype, "hasErrorMessage", {
        get: function () {
            return this.errorMessage && this.errorMessage.length > 0;
        },
        enumerable: false,
        configurable: true
    });
    DropdownBase.prototype.select = function (option) {
        if (option.disabled)
            return;
        var selectedOptions = __spreadArray([], this.value, true);
        var index = selectedOptions.findIndex(function (o) { return o.key === option.key; });
        if (this.multiSelect) {
            if (index === -1)
                selectedOptions.push(option);
            else
                selectedOptions.splice(index, 1);
        }
        else {
            if (index === -1) {
                selectedOptions.splice(0, selectedOptions.length);
                selectedOptions.push(option);
                this.isOpen = false;
            }
        }
        console.log(selectedOptions);
        this.$emit('input', selectedOptions);
    };
    DropdownBase.prototype.onPositioned = function (positions) {
        if (!this.calloutRenderEdge || this.calloutRenderEdge !== positions.targetEdge) {
            this.calloutRenderEdge = positions.targetEdge;
        }
    };
    DropdownBase.prototype.onDismiss = function (e) {
        e.stopPropagation();
        this.isOpen = false;
    };
    /**
     * Scroll handler for the callout to make sure the mouse events
     * for updating focus are not interacting during scroll
     */
    DropdownBase.prototype.onScroll = function () {
        // if (!this._isScrollIdle && this._scrollIdleTimeoutId !== undefined) {
        //   clearTimeout(this._scrollIdleTimeoutId);
        //   this._scrollIdleTimeoutId = undefined;
        // } else {
        //   this._isScrollIdle = false;
        // }
        // this._scrollIdleTimeoutId = window.setTimeout(() => {
        //   this._isScrollIdle = true;
        // }, this._scrollIdleDelay);
    };
    ;
    // private onRenderContainer (props: any) {
    //   const { calloutProps, panelProps } = props
    //   // const { responsiveMode, dropdownWidth } = this.props;
    //   const dropdownWidth = 0
    //   const isSmall = true // responsiveMode! <= ResponsiveMode.medium;
    //   const panelStyles = this.classNames.subComponentStyles
    //     ? this.classNames.subComponentStyles.panel
    //     : undefined
    //   return isSmall
    //     ? h('Panel', {
    //       attrs: {
    //         isOpen: true,
    //         isLightDismiss: true,
    //         hasCloseButton: false,
    //         styles: panelStyles,
    //         ...panelProps,
    //       },
    //       on: {
    //         dismiss: this.onDismiss,
    //       },
    //     }, [
    //       this.renderFocusableList(props),
    //     ])
    //     : h(Callout, {
    //       class: this.classNames.callout,
    //       attrs: {
    //         isBeakVisible: false,
    //         gapSpace: 0,
    //         doNotLayer: false,
    //         directionalHintFixed: false,
    //         directionalHint: DirectionalHint.bottomLeftEdge,
    //         ...calloutProps,
    //         target: this.$refs.dropdown,
    //         calloutWidth: dropdownWidth || (this.$refs.dropdown ? this.$refs.dropdown.clientWidth : 0),
    //       },
    //       on: {
    //         dismiss: this.onDismiss,
    //         scroll: this.onScroll,
    //         positioned: this.onPositioned,
    //       },
    //     }, [
    //       this.renderFocusableList(props),
    //     ])
    // }
    // private renderFocusableList (props: any) {
    //   const { onRenderList = this.onRenderList, label, ariaLabel, multiSelect } = props
    //   return h('div', {
    //     class: this.classNames.dropdownItemsWrapper,
    //     ref: 'host',
    //     attrs: {
    //       tabIndex: 0,
    //     },
    //     on: {
    //       // keydown: this.onZoneKeyDown,
    //       // keyup: this.onZoneKeyUp,
    //     },
    //   }, onRenderList(props, this.onRenderList))
    // }
    // private onRenderList (props: any) {
    //   // return
    // }
    DropdownBase.prototype.render = function (h) {
        var _this = this;
        var _a = this, classNames = _a.classNames, label = _a.label, value = _a.value, multiSelect = _a.multiSelect, multiSelectDelimiter = _a.multiSelectDelimiter, placeholder = _a.placeholder, isOpen = _a.isOpen, dropdownWidth = _a.dropdownWidth, options = _a.options, hasErrorMessage = _a.hasErrorMessage, errorMessage = _a.errorMessage, required = _a.required, disabled = _a.disabled;
        var OptionComponent = multiSelect ? Checkbox : ActionButton;
        var $label = h(Label, {
            class: classNames.label,
            attrs: {
                required: required,
                disabled: disabled,
            },
        }, label);
        var $dropdown = h('div', {
            ref: 'dropdown',
            class: classNames.dropdown,
            on: {
                click: function () { return (_this.isOpen = !_this.isOpen); },
            },
        }, [
            h('span', { class: classNames.title }, value.length
                ? value.map(function (i) { return i.text; }).join(multiSelectDelimiter)
                : placeholder),
            h('span', { class: classNames.caretDownWrapper }, [
                h(Icon, { class: classNames.caretDown, attrs: { iconName: 'ChevronDown' } }),
            ]),
        ]);
        var $errorMessage = hasErrorMessage && h('div', {
            class: classNames.errorMessage,
            attrs: {
                role: 'alert',
            },
        }, errorMessage);
        var $callout = isOpen && h(Callout, {
            attrs: {
                target: this.$refs.dropdown,
                isBeakVisible: false,
                calloutWidth: dropdownWidth || (this.$refs.dropdown ? this.$refs.dropdown.clientWidth : 0),
            },
            on: {
                dismiss: this.onDismiss,
                positioned: this.onPositioned,
            },
        }, [
            h('div', { class: classNames.dropdownItemsWrapper, attrs: { tabindex: 0 } }, [
                options.map(function (option, index) {
                    var isItemSelected = !!_this.value.find(function (o) { return o.key === option.key; });
                    return h(OptionComponent, {
                        key: index,
                        class: option.hidden
                            ? classNames.dropdownItemHidden
                            : isItemSelected && option.disabled === true
                                ? classNames.dropdownItemSelectedAndDisabled
                                : isItemSelected
                                    ? classNames.dropdownItemSelected
                                    : option.disabled === true
                                        ? classNames.dropdownItemDisabled
                                        : classNames.dropdownItem,
                        style: multiSelect ? _this.multiSelectItemStyles : null,
                        attrs: {
                            disabled: option.disabled,
                            title: option.text,
                            checked: isItemSelected,
                            role: option,
                        },
                        nativeOn: {
                            click: function () { return (!multiSelect && _this.select(option)); },
                        },
                        on: {
                            input: function () { return (multiSelect && _this.select(option)); },
                        },
                    }, option.text);
                }),
            ]),
        ]);
        return h('div', { class: classNames.root }, [
            $label,
            $dropdown,
            $callout,
            $errorMessage,
        ]);
    };
    __decorate([
        Prop({ type: Array, required: true }),
        __metadata("design:type", Array)
    ], DropdownBase.prototype, "options", void 0);
    __decorate([
        Prop({ type: Array, default: function () { return []; } }),
        __metadata("design:type", Array)
    ], DropdownBase.prototype, "value", void 0);
    __decorate([
        Prop({ type: String, default: '' }),
        __metadata("design:type", String)
    ], DropdownBase.prototype, "label", void 0);
    __decorate([
        Prop({ type: String, default: '' }),
        __metadata("design:type", String)
    ], DropdownBase.prototype, "placeholder", void 0);
    __decorate([
        Prop({ type: String, default: '' }),
        __metadata("design:type", String)
    ], DropdownBase.prototype, "errorMessage", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], DropdownBase.prototype, "required", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], DropdownBase.prototype, "disabled", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], DropdownBase.prototype, "multiSelect", void 0);
    __decorate([
        Prop({ type: String, default: ', ' }),
        __metadata("design:type", String)
    ], DropdownBase.prototype, "multiSelectDelimiter", void 0);
    __decorate([
        Prop({ type: Number, default: 0 }),
        __metadata("design:type", Number)
    ], DropdownBase.prototype, "dropdownWidth", void 0);
    __decorate([
        Prop({ type: Object, default: function () { } }),
        __metadata("design:type", Object)
    ], DropdownBase.prototype, "panelProps", void 0);
    __decorate([
        Prop({ type: Object, default: function () { } }),
        __metadata("design:type", Object)
    ], DropdownBase.prototype, "calloutProps", void 0);
    DropdownBase = __decorate([
        Component({
            components: { Callout: Callout, ActionButton: ActionButton, Checkbox: Checkbox, Icon: Icon, Label: Label },
        })
    ], DropdownBase);
    return DropdownBase;
}(BaseComponent));
export { DropdownBase };
//# sourceMappingURL=Dropdown.base.js.map