import { jsx as _jsx } from "react/jsx-runtime";
/*
* Copyright (c) 2020-present SMC Treviso s.r.l. All rights reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
import { css } from "styled-components";
import React from "react";
export default function Autocomplete({ suggestions, highlightIndex, applySuggestion, setIsAutocompleteOpen, setHighlightIndex, callbackSelect, }) {
    const itemRefs = React.useRef([]);
    React.useEffect(() => {
        if (highlightIndex >= 0 && itemRefs.current[highlightIndex]) {
            itemRefs.current[highlightIndex]?.scrollIntoView({
                block: "nearest",
                behavior: "smooth",
            });
        }
    }, [highlightIndex, suggestions.length]);
    return (_jsx("div", { className: "openk9--autocomplete-suggestions-container", css: css `
        left: 0;
        right: 0;
        width: 100vw;
        max-width: none;
        min-width: 320px;
        top: unset;
        background: #fff;
        border: 1.5px solid #c22525;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        max-height: 240px;
        overflow-y: auto;
        z-index: 1000;
        animation: fadeIn 0.18s ease;
        left: calc(50% - 50vw);
        top: 53px;

        left: 0;
        width: 100%;
        max-width: 100%;
        position: absolute;
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(-8px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `, children: suggestions.map((s, index) => (_jsx("div", { ref: (el) => (itemRefs.current[index] = el), className: `openk9--autocomplete-suggestion-item ${highlightIndex === index
                ? "openk9--autocomplete-suggestion-item-highlighted"
                : ""}`, css: css `
            padding: 12px 20px;
            cursor: pointer;
            font-size: 1rem;
            color: #222;
            background: "transparent"};
            transition: background 0.15s, color 0.15s;
            border-bottom: 1px solid #f3f3f3;
            &:last-child {
              border-bottom: none;
            }
       .openk9--autocomplete-suggestion-item:hover,
        .openk9--autocomplete-suggestion-item.openk9--autocomplete-suggestion-item-highlighted {
          color: #c22525;
          text-decoration: underline;
        }
            @media (max-width: 600px) {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 100%;
              display: block;
            }
          `, onMouseDown: (e) => {
                e.preventDefault();
                applySuggestion(s);
                setIsAutocompleteOpen(false);
                callbackSelect && callbackSelect();
            }, onMouseEnter: () => setHighlightIndex(index), children: s.autocomplete }, index))) }));
}
