"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var vdom_1 = require("@dojo/framework/core/vdom");
var icache_1 = require("@dojo/framework/core/middleware/icache");
var theme_1 = require("../middleware/theme");
var resources_1 = require("@dojo/framework/core/middleware/resources");
var typeahead_1 = require("../typeahead");
var css = require("../theme/default/chip-typeahead.m.css");
var list_1 = require("../list");
var chip_1 = require("../chip");
var focus_1 = require("@dojo/framework/core/middleware/focus");
var typeaheadCss = require("../theme/default/typeahead.m.css");
var chipCss = require("../theme/default/chip.m.css");
var labelCss = require("../theme/default/label.m.css");
var label_1 = require("../label");
var factory = vdom_1.create({
    icache: icache_1.createICacheMiddleware(),
    theme: theme_1.default,
    resource: resources_1.createResourceMiddleware(),
    focus: focus_1.default
})
    .properties()
    .children();
function arraysDifferent(arr1, arr2) {
    if (arr1.length !== arr2.length) {
        return true;
    }
    for (var i = 0; i < arr1.length; i++) {
        if (arr1[i] !== arr2[i]) {
            return true;
        }
    }
    return false;
}
exports.arraysDifferent = arraysDifferent;
exports.ChipTypeahead = factory(function ChipTypeahead(_a) {
    var id = _a.id, _b = _a.middleware, icache = _b.icache, theme = _b.theme, focus = _b.focus, resource = _b.resource, properties = _a.properties, children = _a.children;
    var createOptions = resource.createOptions, find = resource.find;
    var _c = properties(), _d = _c.initialValue, initialValue = _d === void 0 ? [] : _d, disabled = _c.disabled, itemsInView = _c.itemsInView, position = _c.position, name = _c.name, _e = _c.placement, placement = _e === void 0 ? 'inline' : _e, strict = _c.strict, _f = _c.resource, template = _f.template, _g = _f.options, options = _g === void 0 ? createOptions(id) : _g;
    var _h = tslib_1.__read(children(), 1), _j = _h[0], _k = _j === void 0 ? {} : _j, label = _k.label, items = _k.items, selected = _k.selected;
    var themeCss = theme.classes(css);
    var _l = properties(), value = _l.value, _m = _l.classes, classes = _m === void 0 ? {} : _m, variant = _l.variant;
    var focused = icache.getOrSet('focused', false);
    if (value !== undefined && arraysDifferent(value || [], icache.get('value') || [])) {
        icache.set('value', value || []);
    }
    if (value === undefined && arraysDifferent(icache.getOrSet('initialValue', []), initialValue)) {
        icache.set('value', initialValue);
        icache.set('initialValue', initialValue);
    }
    var storedValues = icache.getOrSet('value', []);
    var findOptions = createOptions(id + "-find");
    findOptions({ size: options().size, page: options().page });
    var chips = storedValues.map(function (value, index) {
        var option;
        if (value) {
            option = (find(template, {
                options: findOptions(),
                start: 0,
                query: { value: value },
                type: 'exact'
            }) || {
                item: undefined
            }).item;
        }
        return (vdom_1.tsx(chip_1.default, { theme: theme.compose(chipCss, css, 'selection'), key: "value-" + value, classes: tslib_1.__assign({}, classes, { '@dojo/widgets/chip': tslib_1.__assign({}, classes['@dojo/widgets/chip'], { root: [themeCss.value] }) }), variant: variant, onClose: disabled
                ? undefined
                : function () {
                    var onValue = properties().onValue;
                    var options = tslib_1.__spread(icache.getOrSet('options', []));
                    options.splice(index, 1);
                    icache.set('value', options.map(function (option) { return option.value; }));
                    icache.set('options', options);
                    onValue && onValue(options);
                    focus.focus();
                } }, {
            label: selected
                ? selected(value, option ? option.label : value)
                : option
                    ? option.label
                    : value
        }));
    });
    var values = icache.getOrSet('value', []);
    var active = focused || values.length > 0;
    return (vdom_1.tsx("div", { key: "root", classes: [
            theme.variant(),
            themeCss.root,
            values.length > 0 ? themeCss.hasValue : null,
            focused ? themeCss.focused : null,
            label ? themeCss.hasLabel : null
        ] },
        label && (vdom_1.tsx(label_1.default, { focused: focused, active: active, theme: theme.compose(labelCss, css, 'label'), classes: {
                '@dojo/widgets/label': {
                    root: [themeCss.label]
                }
            }, variant: variant }, label)),
        vdom_1.tsx(typeahead_1.default, { key: "typeahead", theme: theme.compose(typeaheadCss, css, 'input'), variant: variant, strict: strict, itemsInView: itemsInView, position: position, name: name, focus: focus.shouldFocus, disabled: disabled, resource: resource({ template: template, options: options }), onValue: function (value) {
                var onValue = properties().onValue;
                var options = icache.set('options', function (values) {
                    if (values === void 0) { values = []; }
                    return tslib_1.__spread(values, [value]);
                });
                var values = icache.set('value', function (values) {
                    if (values === void 0) { values = []; }
                    return tslib_1.__spread(values, [value.value]);
                });
                icache.set('value', values);
                icache.set('options', options);
                onValue && onValue(options);
                focus.focus();
            }, value: "", onFocus: function () { return icache.set('focused', true); }, onBlur: function () { return icache.set('focused', false); }, classes: {
                '@dojo/widgets/text-input': {
                    inputWrapper: [themeCss.inputWrapper],
                    input: [themeCss.input],
                    wrapper: [themeCss.wrapper]
                }
            }, itemDisabled: function (item) {
                var _a = properties(), _b = _a.duplicates, duplicates = _b === void 0 ? false : _b, _c = _a.strict, strict = _c === void 0 ? true : _c;
                var selected = icache.getOrSet('value', []).indexOf(item.value) !== -1;
                return item.disabled || (!duplicates && strict && selected);
            } }, {
            items: function (item, props) {
                var selected = icache.getOrSet('value', []).indexOf(item.value) !== -1;
                if (items) {
                    return items(tslib_1.__assign({}, item, { selected: selected }), tslib_1.__assign({}, props, { selected: selected }));
                }
                return (vdom_1.tsx(list_1.ListItem, tslib_1.__assign({}, props, { selected: selected }),
                    vdom_1.tsx("div", { classes: [themeCss.item, selected ? themeCss.selected : null] }, item.label)));
            },
            leading: placement === 'inline' ? chips : undefined
        }),
        placement === 'bottom' && vdom_1.tsx("div", { classes: themeCss.values }, chips)));
});
exports.default = exports.ChipTypeahead;

/*# sourceMappingURL=index.js.map*/