"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 array_1 = require("@dojo/framework/shim/array");
var factory = vdom_1.create({
    icache: icache_1.createICacheMiddleware(),
    theme: theme_1.default,
    resource: resources_1.createResourceMiddleware(),
    focus: focus_1.default
})
    .properties()
    .children();
function valueChanged(values, options) {
    if (values === void 0) { values = []; }
    if (options === void 0) { options = []; }
    if (values.length !== options.length) {
        return true;
    }
    for (var i = 0; i < values.length; i++) {
        if (!options[i] || options[i].value !== values[i]) {
            return true;
        }
    }
    return false;
}
exports.ChipTypeahead = factory(function ChipTypeahead(_a) {
    var _b = _a.middleware, icache = _b.icache, theme = _b.theme, focus = _b.focus, resource = _b.resource, properties = _a.properties, children = _a.children;
    var _c = properties(), value = _c.value, _d = _c.classes, classes = _d === void 0 ? {} : _d, variant = _c.variant, _e = _c.initialValue, initialValue = _e === void 0 ? [] : _e, disabled = _c.disabled, itemsInView = _c.itemsInView, position = _c.position, name = _c.name, _f = _c.placement, placement = _f === void 0 ? 'inline' : _f, strict = _c.strict, _g = _c.resource, template = _g.template, _h = _g.options, options = _h === void 0 ? resource.createOptions(function (curr, next) { return (tslib_1.__assign({}, curr, next)); }) : _h, kind = _c.kind;
    var _j = resource.template(template), get = _j.get, read = _j.template.read;
    var _k = tslib_1.__read(children(), 1), _l = _k[0], _m = _l === void 0 ? {} : _l, label = _m.label, items = _m.items, selected = _m.selected;
    var themeCss = theme.classes(css);
    var focused = icache.getOrSet('focused', false);
    var selectedOptions = icache.set('options', function (current) {
        if (!current && initialValue && !value) {
            var items_1 = get(options(), { read: read });
            var initialSelectedOptions = initialValue.map(function (valueId) {
                if (items_1) {
                    var findResult = array_1.find(items_1, function (item) { return item.value === valueId; });
                    if (findResult) {
                        return findResult;
                    }
                }
                return {
                    value: '',
                    label: ''
                };
            });
            if (valueChanged(initialValue, initialSelectedOptions)) {
                return current || [];
            }
            return initialSelectedOptions;
        }
        else if (value && valueChanged(value, current)) {
            var controlledOptions = value.map(function (valueId) {
                var items = get(options(), { read: read });
                if (items) {
                    var findResult = array_1.find(items, function (item) { return item.value === valueId; });
                    if (findResult) {
                        return findResult;
                    }
                }
                return {
                    value: '',
                    label: ''
                };
            });
            if (valueChanged(value, controlledOptions)) {
                return current || [];
            }
            return controlledOptions;
        }
        return current || [];
    });
    var chips = selectedOptions.map(function (_a, index) {
        var value = _a.value, label = _a.label;
        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, disabled: disabled, onClose: disabled
                ? undefined
                : function () {
                    var onValue = properties().onValue;
                    var options = tslib_1.__spread(icache.getOrSet('options', []));
                    options.splice(index, 1);
                    icache.set('options', options);
                    onValue && onValue(options);
                    focus.focus();
                } }, {
            label: selected ? selected(value, label) : label
        }));
    });
    return (vdom_1.tsx("div", { key: "root", classes: [
            theme.variant(),
            disabled ? themeCss.disabled : null,
            themeCss.root,
            selectedOptions.length > 0 ? themeCss.hasValue : null,
            focused ? themeCss.focused : null,
            label ? themeCss.hasLabel : themeCss.noLabel
        ] },
        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]);
                });
                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': {
                    input: [themeCss.input],
                    wrapper: [themeCss.wrapper],
                    leading: [themeCss.inputLeading],
                    leadingWrapper: [themeCss.inputLeadingWrapper],
                    defaultKind: [themeCss.defaultKind],
                    outlinedKind: [themeCss.outlinedKind],
                    labelWrapper: [themeCss.inputLabel],
                    label: [themeCss.label, chips.length ? themeCss.labelActive : undefined],
                    notchedOutline: [
                        kind === 'outlined' && chips.length ? themeCss.notchActive : undefined
                    ]
                }
            }, 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('options', [])
                    .findIndex(function (option) { return option.value === item.value; }) !== -1;
                return item.disabled || (!duplicates && strict && selected);
            }, kind: kind }, {
            label: label,
            items: function (item, props) {
                var selected = icache
                    .getOrSet('options', [])
                    .findIndex(function (option) { return option.value === 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 && chips.length ? chips : undefined
        }),
        placement === 'bottom' && vdom_1.tsx("div", { classes: themeCss.values }, chips)));
});
exports.default = exports.ChipTypeahead;

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