import { jsx as _jsx, jsxs as _jsxs } 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 React from "react";
import { useTranslation } from "react-i18next";
import { css } from "styled-components";
import { TokenSelect } from "../components/TokenSelect";
import { SearchSvg } from "../svgElement/SearchSvg";
import { useClickAway } from "./useClickAway";
export function SearchWithSuggestions({ configuration, spans, selectionsState, selectionsDispatch, showSyntax, htmlKey, customMessageSearch, messageSearchIsVisible = true, viewColor = true, callbackSearch, actionOnClick, placeholder, labelIcon, }) {
    const autoSelect = configuration.searchAutoselect;
    const replaceText = configuration.searchReplaceText;
    const [openedDropdown, setOpenedDropdown] = React.useState({ textPosition: 0, optionPosition: 1 });
    const clickAwayRef = React.useRef(null);
    useClickAway([clickAwayRef], () => setOpenedDropdown(null));
    const inputRef = React.useRef(null);
    const [adjustedSelection, setAdjustedSelection] = React.useState({ selectionStart: 0, selectionEnd: 0 });
    React.useLayoutEffect(() => {
        if (inputRef.current) {
            inputRef.current.selectionStart = adjustedSelection.selectionStart;
            inputRef.current.selectionEnd = adjustedSelection.selectionEnd;
        }
    }, [adjustedSelection]);
    const { setText } = setValueSearch({
        selectionsDispatch: selectionsDispatch,
    });
    const { t } = useTranslation();
    return (_jsx(React.Fragment, { children: _jsx("div", { className: "openk9--search-container", css: css `
          margin-top: 12px;
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          @media (max-width: 480px) {
            flex-direction: column;
            margin-top: 15px;
          }
          .openk9-focusable:has(input:focus) {
            border: 1px solid #c22525;
          }
        `, children: _jsxs("div", { ref: clickAwayRef, className: "openk9-embeddable-search--input-container openk9-focusable", css: css `
            display: flex;
            align-items: center;
            border-radius: 40px;
            width: 100%;
            max-height: 50px;
            @media (max-width: 480px) {
              width: 100%;
              max-height: 40px;
            }
          `, children: [_jsxs("div", { className: "openk9--search-container-show-syntax", css: css `
              flex-grow: 1;
              position: relative;
              display: flex;
            `, children: [_jsx("div", { className: "openk9--search-show-syntax", css: css `
                top: 0px;
                left: 0px;
                padding: var(--openk9-embeddable-search--input-padding);
                display: flex;
                position: absolute;
                @media (max-width: 480px) {
                  display: none;
                }
              `, children: showSyntax &&
                                    spans.map((span, index) => {
                                        const isOpen = openedDropdown !== null &&
                                            openedDropdown.textPosition > span.start &&
                                            openedDropdown.textPosition <= span.end &&
                                            span.tokens.length > 0;
                                        const optionIndex = openedDropdown?.optionPosition ?? null;
                                        const selection = selectionsState.selection.find((selection) => selection.start === span.start &&
                                            selection.end === span.end);
                                        const selected = selection?.token ?? null;
                                        const onSelect = (token) => {
                                            selectionsDispatch({
                                                type: "set-selection",
                                                replaceText,
                                                selection: {
                                                    text: span.text,
                                                    textOnChange: span.text,
                                                    start: span.start,
                                                    end: span.end,
                                                    token,
                                                    isAuto: autoSelect,
                                                },
                                            });
                                            if (inputRef.current?.selectionStart &&
                                                inputRef.current?.selectionEnd) {
                                                setAdjustedSelection({
                                                    selectionStart: inputRef.current.selectionStart,
                                                    selectionEnd: inputRef.current.selectionEnd,
                                                });
                                            }
                                        };
                                        const isAutoSelected = selection?.isAuto ?? false;
                                        const onOptionIndexChange = (optionIndex) => {
                                            setOpenedDropdown((openedDropdown) => openedDropdown
                                                ? { ...openedDropdown, optionPosition: optionIndex }
                                                : openedDropdown);
                                        };
                                        return (_jsx(TokenSelect, { span: span, isOpen: isOpen, onOptionIndexChange: onOptionIndexChange, optionIndex: optionIndex, selected: selected, onSelect: onSelect, isAutoSlected: isAutoSelected, setOpenedDropdown: setOpenedDropdown, isColorSearch: viewColor }, index));
                                    }) }), !htmlKey && (_jsx("label", { htmlFor: "openk9--input-search", className: "visually-hidden label-search", css: css `
                  border: 0;
                  padding: 0;
                  margin: 0;
                  position: absolute !important;
                  height: 1px;
                  width: 1px;
                  overflow: hidden;
                  clip: rect(
                    1px 1px 1px 1px
                  ); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
                  clip: rect(
                    1px,
                    1px,
                    1px,
                    1px
                  ); /*maybe deprecated but we need to support legacy browsers */
                  clip-path: inset(50%);
                  white-space: nowrap;
                `, children: "Search" })), _jsx("input", { className: "openk9--input-search", autoComplete: "off", ref: inputRef, id: "search-openk9-header", "aria-describedby": "message-search", type: "text", placeholder: placeholder || t("search") || "search...", value: selectionsState.textOnChange, onChange: (event) => {
                                    setText(event.currentTarget.value);
                                }, css: css `
                position: relative;
                flex-grow: 1;
                border: none;
                outline: none;
                padding: var(--openk9-embeddable-search--input-padding);
                caret-color: black;
                font-size: inherit;
                font-family: inherit;
                background-color: inherit;
                color: black;
                @media (max-width: 480px) {
                  color: black;
                }
              `, spellCheck: "false", onSelect: (event) => {
                                    if ((event.currentTarget.selectionDirection === "forward" ||
                                        event.currentTarget.selectionDirection === "none") &&
                                        event.currentTarget.selectionStart ===
                                            event.currentTarget.selectionEnd) {
                                        setOpenedDropdown({
                                            textPosition: event.currentTarget.selectionStart,
                                            optionPosition: openedDropdown?.optionPosition ?? 0,
                                        });
                                    }
                                }, onKeyDown: (event) => {
                                    const span = openedDropdown &&
                                        spans.find((span) => openedDropdown.textPosition > span.start &&
                                            openedDropdown.textPosition <= span.end);
                                    const option = openedDropdown &&
                                        span?.tokens[openedDropdown.optionPosition - 1];
                                    if (event.key === "ArrowDown") {
                                        event.preventDefault();
                                        if (openedDropdown && span) {
                                            setOpenedDropdown({
                                                textPosition: openedDropdown.textPosition,
                                                optionPosition: openedDropdown.optionPosition < span.tokens.length
                                                    ? openedDropdown.optionPosition + 1
                                                    : 1,
                                            });
                                        }
                                    }
                                    else if (event.key === "ArrowUp") {
                                        event.preventDefault();
                                        if (openedDropdown && openedDropdown.optionPosition > 0) {
                                            setOpenedDropdown({
                                                textPosition: openedDropdown.textPosition,
                                                optionPosition: openedDropdown.optionPosition === 1
                                                    ? span?.tokens.length || 1
                                                    : openedDropdown.optionPosition - 1,
                                            });
                                        }
                                    }
                                    else if (event.key === "Enter") {
                                        event.preventDefault();
                                        if (callbackSearch)
                                            callbackSearch();
                                        if (actionOnClick) {
                                            actionOnClick();
                                        }
                                        if (span && option) {
                                            selectionsDispatch({
                                                type: "set-selection",
                                                replaceText,
                                                selection: {
                                                    text: span.text,
                                                    textOnChange: span.text,
                                                    start: span.start,
                                                    end: span.end,
                                                    token: option ?? null,
                                                    isAuto: false,
                                                },
                                            });
                                            if (replaceText && option) {
                                                const text = option &&
                                                    (option.tokenType === "ENTITY"
                                                        ? option.entityName
                                                        : option.value);
                                                const cursorPosition = span.start + (text?.length ?? 0);
                                                setAdjustedSelection({
                                                    selectionStart: cursorPosition,
                                                    selectionEnd: cursorPosition,
                                                });
                                            }
                                            else if (event.currentTarget.selectionStart &&
                                                event.currentTarget.selectionEnd) {
                                                setAdjustedSelection({
                                                    selectionStart: event.currentTarget.selectionStart,
                                                    selectionEnd: event.currentTarget.selectionEnd,
                                                });
                                            }
                                        }
                                    }
                                } }), messageSearchIsVisible && (_jsx("p", { className: "visually-hidden", id: "message-search-header", css: css `
                  border: 0;
                  padding: 0;
                  margin: 0;
                  position: absolute !important;
                  height: 1px;
                  width: 1px;
                  overflow: hidden;
                  clip: rect(
                    1px 1px 1px 1px
                  ); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
                  clip: rect(
                    1px,
                    1px,
                    1px,
                    1px
                  ); /*maybe deprecated but we need to support legacy browsers */
                  clip-path: inset(50%);
                  white-space: nowrap;
                `, children: customMessageSearch ||
                                    t("insert-text-to-set-the-value-or-use-up-and-down-arrow-keys-to-navigate-the-suggestion-box") ||
                                    "insert text to set the value or use up and down arrow keys to navigate the suggestion box" }))] }), _jsx("button", { id: "search-header-icon", className: "openk9--search-search-container-icon", title: "avvia ricerca", "aria-label": labelIcon, css: css `
              padding-right: 16px;
              display: flex;
              flex-direction: row;
              padding: 4px 8px;
              gap: 4px;
              align-items: center;
              margin-right: 21px;
              background: inherit;
              border: none;
            `, onClick: () => {
                            if (callbackSearch)
                                callbackSearch();
                        }, children: _jsx("div", { children: _jsx("span", { className: "openk9--search-search-span-icon", css: css `
                  cursor: pointer;
                  @media (max-width: 480px) {
                    margin-top: 7px;
                    display: none;
                  }
                `, children: _jsx(SearchSvg, {}) }) }) })] }) }) }));
}
function setValueSearch({ selectionsDispatch, }) {
    const setText = (text) => selectionsDispatch({
        type: "set-text",
        textOnchange: text,
        text,
    });
    return { setText };
}
