/*!
 * 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 { h } from "@stencil/core";
import { Fragment } from "@stencil/core/internal";
import SuggestionSkeleton from "../assets/suggestion-skeleton.svg";
import { Header } from "./header";
import { W3wSuggestion } from "./w3w-suggestion";
const W3wSuggestions = ({ tag, suggestions, value, hoverIndex, onSuggestionSelected, onMouseOver, onMouseOut, }) => {
    return (h(Fragment, null, suggestions.map((opt, i) => {
        const onMouseDown = (e) => e.preventDefault();
        return (h(W3wSuggestion, { key: opt.words, class: {
                [`${tag}-item`]: !!tag,
                match: value === opt.words,
                active: hoverIndex === i,
            }, tag: tag, opt: opt, onMouseDown: onMouseDown, onMouseUp: onSuggestionSelected(opt), onMouseOver: onMouseOver(opt), onMouseOut: onMouseOut, "data-testid": "suggestion-" + i }));
    })));
};
const W3wSuggestionsSkeleton = ({ tag, }) => (h(Fragment, null, h("li", { class: { [`${tag}-suggestion-skeleton`]: !!tag } }, h("img", { src: SuggestionSkeleton, alt: "suggestion skeleton" })), h("li", { class: { [`${tag}-suggestion-skeleton`]: !!tag } }, h("img", { src: SuggestionSkeleton, alt: "suggestion skeleton" })), h("li", { class: { [`${tag}-suggestion-skeleton`]: !!tag } }, h("img", { src: SuggestionSkeleton, alt: "suggestion skeleton" }))));
export const Suggestions = (_a) => {
    var { tag, hoverIndex, value, loading, suggestions, onSuggestionSelected, onMouseOver, onMouseOut, onClose } = _a, props = __rest(_a, ["tag", "hoverIndex", "value", "loading", "suggestions", "onSuggestionSelected", "onMouseOver", "onMouseOut", "onClose"]);
    const showSkeleton = loading && value.length > 0 && suggestions.length === 0;
    const showSuggestions = value.length > 0 && suggestions.length > 0;
    const showHeader = loading || showSuggestions;
    return (h("ul", { "data-testid": `${tag}-suggestions`, class: { [`${tag}-suggestions`]: !!tag },
        // 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: props.style }, showSkeleton && h(W3wSuggestionsSkeleton, { tag: tag }), showSuggestions && (h(W3wSuggestions, { tag: tag, suggestions: suggestions, value: value, hoverIndex: hoverIndex, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onSuggestionSelected: onSuggestionSelected })), showHeader && h(Header, { tag: tag, onClose: onClose })));
};
