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 { css } from "styled-components";
import { DeleteLogo } from "./DeleteLogo";
import { useTranslation } from "react-i18next";
export function TokenSelect({ span, onSelect, selected, isOpen, optionIndex, onOptionIndexChange, isAutoSlected, setOpenedDropdown, isColorSearch = true, }) {
    const isInteractive = span.tokens.length > 0;
    const [subtitle, setSubtitle] = React.useState(false);
    const { t } = useTranslation();
    const statusStyles = {
        "can-select": css `
      display: ${isColorSearch ? "block" : "none"};
      color: ${isColorSearch
            ? "var(--openk9-embeddable-search--primary-color)"
            : "inerith"};
    `,
        "auto-selected": css `
      display: ${isColorSearch ? "block" : "none"};
      color: lightseagreen;
    `,
        "has-selected": css `
      display: ${isColorSearch ? "block" : "none"};
      color: dodgerblue;
    `,
        "not-interactive": css `
      display: ${isColorSearch ? "block" : "none"};
      color: black;
    `,
    };
    const status = isInteractive
        ? selected !== null
            ? isAutoSlected
                ? "auto-selected"
                : "has-selected"
            : "can-select"
        : "not-interactive";
    const entryStyle = (isSelected, isHighlighted) => css `
    padding: 8px 16px;
    border-bottom: 1px solid #b09c9c12;
    :hover {
    }
    background-color: ${isHighlighted
        ? " #eeeeee"
        : "var(--openk9-embeddable-search--primary-background-color)"};
    cursor: pointer;
    border-left: ${isSelected
        ? `8px solid var(--openk9-embeddable-search--active-color)`
        : "none"};
    padding-left: ${isSelected ? "8px" : "16px"};
  `;
    const deseleziona = (isSelected) => css `
    padding: 8px 16px;
    :hover {
    }
    background-color: ${"var(--openk9-embeddable-search--secondary-background-color)"};
    cursor: ${!isSelected ? "" : "not-allowed"};
  `;
    return (_jsxs("div", { className: "openk9-token-select-container", css: css `
        position: relative;
      `, children: [_jsx("div", { className: "openk9-token-select", css: css `
          white-space: pre;
          ${statusStyles[status]};
          border-radius: 4px;
          border-top: ${isOpen
                    ? "2px solid var(--openk9-embeddable-search--active-color)"
                    : ""};
          margin-top: ${isOpen ? "-2px" : ""};
        `, children: span.text }), isOpen && (_jsxs("div", { className: "openk9-token-select-is-open", css: css `
            position: absolute;
            top: 100%;
            margin-top: ${isColorSearch ? "0px" : "20px"};
            left: 0px;
            width: 330px;
            background-color: var(
              --openk9-embeddable-search--primary-background-color
            );
            border: 1px solid var(--openk9-embeddable-search--border-color);
            border-radius: 4px;
            background-color: var(
              --openk9-embeddable-search--secondary-background-color
            );
            margin-bottom: 1px solid red;

            z-index: 3; /* workaround for scrollbar overaly problem */
          `, children: [_jsx("div", { className: "openk9-enter-token", onMouseEnter: () => {
                            onOptionIndexChange(0);
                        }, css: css `
              ${deseleziona(selected === null)};
              padding: 0;
            `, children: _jsxs("button", { className: "openk9-token-select-uncheck", css: css `
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                color: var(--openk9-embeddable-search--secondary-text-color);
                text-decoration: ${selected && subtitle ? "underline" : ""};
                cursor: ${selected && subtitle ? "pointer" : "auto"};
                width: 100%;
                height: 100%;
                border: none;
                padding: 8px 16px;
              `, children: [_jsx("div", { onClick: () => {
                                        if (selected)
                                            onSelect(null);
                                    }, onMouseEnter: () => {
                                        setSubtitle(true);
                                    }, onMouseLeave: () => {
                                        setSubtitle(false);
                                    }, children: t("uncheck") }), _jsx("div", { css: css `
                  cursor: pointer;
                `, onClick: () => {
                                        setOpenedDropdown(null);
                                    }, children: _jsx(DeleteLogo, { widthParam: 10, heightParam: 10 }) })] }) }), span.tokens.map((option, index) => {
                        const isSelected = option.tokenType === selected?.tokenType &&
                            option.value === selected.value;
                        const isHighlighted = optionIndex === index + 1;
                        return (_jsxs("div", { onClick: () => {
                                if (!isSelected) {
                                    onSelect(option);
                                }
                            }, onMouseEnter: () => {
                                onOptionIndexChange(index + 1);
                            }, className: "openk9-token-select-container-highlighted", css: css `
                  ${entryStyle(isSelected, isHighlighted)};
                  display: flex;
                  justify-content: space-between;
                  align-items: baseline;
                `, children: ["keywordName" in option && (_jsxs("strong", { className: "openk9-token-select-highlighted", css: css `
                      margin-right: 8px;
                    `, children: [option.keywordName, ":"] })), _jsx(FactoryTokenType, { option: option, t: t })] }, index));
                    })] }))] }));
}
export function getTokenLabel(token) {
    switch (token.tokenType) {
        case "DATASOURCE":
            return token.value;
        case "DOCTYPE":
            return token.value;
        case "ENTITY":
            return token.entityName;
        case "TEXT":
            return token.value;
        case "AUTOCOMPLETE":
            return token.value;
        case "FILTER":
            return token.value;
    }
    return token.value;
}
function FactoryTokenType({ option, t, }) {
    switch (option.tokenType) {
        case "AUTOCOMPLETE":
            return (_jsx(React.Fragment, { children: _jsx("div", { className: "openk9-token-select-factory-autocomplete", css: css `
              display: flex;
              font-family: "Helvetica";
              font-style: normal;
              font-weight: 400;
              font-size: 15px;
              line-height: 17px;
            `, children: option.value }) }));
            break;
        case "AUTOCORRECT":
            return (_jsxs("span", { className: "openk9-token-select-factory-autocorrect", children: [t("did-you-mean"), " ", _jsx("strong", { children: option.value })] }));
        default:
            return (_jsxs(React.Fragment, { children: [_jsx("div", { className: "openk9-token-select-factory-create", css: css `
              display: flex;
              font-family: "Helvetica";
              font-style: normal;
              font-weight: 400;
              font-size: 15px;
              line-height: 17px;
            `, children: getTokenLabel(option) }), _jsx("div", { className: "openk9-token-select-factory-container-option-label", css: css `
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 4px 8px;
              gap: 4px;
              height: 15px;
              background: #ffffff;
              border: 1px solid
                var(--openk9-embeddable-search--secondary-active-color);
              border-radius: 20px;
              margin-left: 10px;
            `, children: _jsx("div", { className: "openk9-token-select-factory-option-label", css: css `
                color: var(--openk9-embeddable-search--secondary-active-color);
                margin-bottom: 13px;
                font-size: 12px;
                display: block;
                margin-block-start: 1em;
                margin-block-end: 1em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;
              `, children: option.label }) })] }));
            break;
    }
}
