/*!
 * Copyright (c) what3words http://what3words.com
 */
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s)
        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
            t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { Fragment, h } from "@stencil/core";
import { CustomSuggestion } from "./custom-suggestion";
import { W3wSuggestion } from "./w3w-suggestion";
const c = "what3words-autosuggest";
export const Suggestions = (_a) => {
    var { hoverIndex, value, suggestions, options, offsetWidth, onW3wSuggestionSelected, onCustomOptionSelected, onMouseOver, onMouseOut } = _a, rest = __rest(_a, ["hoverIndex", "value", "suggestions", "options", "offsetWidth", "onW3wSuggestionSelected", "onCustomOptionSelected", "onMouseOver", "onMouseOut"]);
    const CustomOptions = () => {
        return (h(Fragment, null, options.map((opt, i) => {
            const { description, distance: distanceOpt } = opt;
            const { value: distance, units } = Object.assign({ units: "km" }, distanceOpt);
            const classes = [`${c}-item`];
            if (value.toLocaleLowerCase() === opt.value.toLocaleLowerCase()) {
                classes.push("match");
            }
            if (hoverIndex === i)
                classes.push("active");
            const onMouseDown = (e) => e.preventDefault();
            const onMouseUp = () => onCustomOptionSelected({
                id: opt.id,
                value: opt.value,
            });
            const onHover = () => onMouseOver({
                id: opt.id,
                value: opt.value,
            });
            return (h(CustomSuggestion, { distance: distance, units: units, description: description, value: opt.value, class: classes.join(" "), onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseOver: onHover, "data-testid": "suggestion-" + i }));
        })));
    };
    const W3wSuggestions = () => (h(Fragment, null, suggestions.map((opt, i) => {
        const classes = [`${c}-item`];
        if (value === opt.words)
            classes.push("match");
        if (hoverIndex === i)
            classes.push("active");
        const onMouseDown = (e) => e.preventDefault();
        return (h(W3wSuggestion, { opt: opt, class: classes.join(" "), onMouseDown: onMouseDown, onMouseUp: onW3wSuggestionSelected(opt), onMouseOver: onMouseOver(opt), onMouseOut: onMouseOut, "data-testid": "suggestion-" + i }));
    })));
    const width = offsetWidth ? String(offsetWidth) + "px" : undefined;
    return (h("div", { class: rest.class, "data-testid": "suggestions-wrapper" }, h("div", { class: `${c}-items`,
        // Dynamically settings the width of the suggestions if there is an input. If you change the size of the
        // border in autosuggest.scss you must also change it here accordingly.
        style: { width } }, suggestions.length ? h(W3wSuggestions, null) : null, options.length ? h(CustomOptions, null) : null)));
};
