import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { faChevronDown, faChevronUp, faSearch, } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Chatbot } from "@openk9ui/openk9-chatbot";
import { debounce } from "lodash";
import moment from "moment";
import React from "react";
import { useTranslation } from "react-i18next";
import { css } from "styled-components";
import "./app.css";
import "./components/dataRangePicker.css";
import { DeleteLogo } from "./components/DeleteLogo";
import { Logo } from "./components/Logo";
import { MaintenancePage } from "./components/MaintenancePage";
import { OpenK9 } from "./embeddable/entry";
import "./index.css";
import "./ScrollBar.css";
import { CalendarMobileSvg } from "./svgElement/CalendarMobileSvg";
import { FilterHorizontalSvg } from "./svgElement/FilterHorizontalSvg";
import { FilterSvg } from "./svgElement/FiltersSvg";
import { TrashSvg as TrashIcon } from "./svgElement/TrashSvg";
import { User } from "./svgElement/UserSvg";
import { CloseIcon } from "./svgElement/CloseSvg";
import "./components/SortResultList.css";
import "./components/dateRangePickerVertical.css";
import "./components/dataRangePicker.css";
import "react-dates/lib/css/_datepicker.css";
const isKeycloakEnabled = import.meta.env.VITE_KEYCLOAK_ENABLED === "true" && !!window.KEYCLOAK_URL && window.KEYCLOAK_URL !== "DISABLED";
const isChatbotEnabled = import.meta.env.VITE_CHATBOT_ENABLED === "true";
const isGenerativeEnabled = import.meta.env.VITE_GENERATIVE_ENABLED === "true";
const isCalendarEnabled = import.meta.env.VITE_CALENDAR_ENABLED !== "false";
export const openk9 = new OpenK9({
    enabled: true,
    searchAutoselect: false,
    searchReplaceText: false,
    memoryResults: false,
    useGenerativeApi: isGenerativeEnabled,
    useKeycloak: isKeycloakEnabled,
    queryStringMap: { filters: "filtri" },
    useQueryAnalysis: false,
    showSyntax: false,
    autocompleteEnabled: true,
});
export function App() {
    const serviceStatus = useServiceStatus();
    const [isVisibleFilters, setIsVisibleFilters] = React.useState(false);
    const [numberOfResults, setNumberOfResults] = React.useState(false);
    const [isVisibleSearchMobile, setIsVisibleSearchMobile] = React.useState(false);
    const [isVisibleCalendar, setIsVisibleCalendar] = React.useState(false);
    const [startDate, setStartDate] = React.useState(null);
    const [endDate, setEndDate] = React.useState(null);
    const [focusedInput, setFocusedInput] = React.useState(null);
    const [isClickReset, setIsClickReset] = React.useState(false);
    const [isOpenCalendar, setIsOpenCalendar] = React.useState(false);
    const [isPanelVisible, setIsPanelVisible] = React.useState(true);
    const [searchText, setSearchText] = React.useState(undefined);
    React.useEffect(() => {
        document.body.classList.toggle("no-scroll", isVisibleFilters || isVisibleSearchMobile || isVisibleCalendar);
        return () => document.body.classList.remove("no-scroll");
    }, [isVisibleFilters, isVisibleSearchMobile, isVisibleCalendar]);
    const { t } = useTranslation();
    const debouncedUpdateSearch = debounce((search) => {
        const text = search?.[0]?.values?.[0] || undefined;
        setSearchText(text);
    }, 200);
    const debouncedNumberOfResults = debounce((search) => {
        setNumberOfResults(search);
    }, 200);
    React.useEffect(() => {
        openk9.addEventListener("queryStateChange", (newConfig) => {
            debouncedUpdateSearch(newConfig.searchTokens);
            debouncedNumberOfResults(newConfig.numberOfResults);
        });
    }, [openk9]);
    React.useEffect(() => {
        if (isVisibleFilters || isVisibleSearchMobile || isVisibleCalendar) {
            document.body.classList.add("no-scroll");
        }
        else {
            document.body.classList.remove("no-scroll");
        }
        return () => {
            document.body.classList.remove("no-scroll");
        };
    }, [isVisibleFilters, isVisibleCalendar, isVisibleSearchMobile]);
    if (serviceStatus === "down") {
        return _jsx(MaintenancePage, {});
    }
    return (_jsxs("div", { id: "openk9-body", className: "openk9-body", css: css `
        background-color: var(
          --openk9-embeddable-search--secondary-background-color
        );
        width:100vw;
        height: 100vh;
        display: grid;
        grid-column-gap: 30px;
        padding:  50px ;
        padding-block:0px;
        box-sizing: border-box;
        grid-template-columns: 1fr 2.5fr 1.8fr;
        grid-template-rows: auto auto auto auto 1fr;
        grid-template-areas:
          "dockbar dockbar dockbar"
          "search search search"
          "tabs tabs tabs"
          "filters panel panel"
          "filters result detail";
        padding: 20px;
        padding-top:0px;
        @-moz-document url-prefix() {
          .openk9-container-tabs {
          margin-bottom: 30px;
           }
        }
        @media (max-width: 480.98px) {
          padding: 0;
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto auto 1fr;
          grid-template-areas:
            "dockbar"
            "search"
            "tabs"
            "panel"
            "result";
        }

        @media (min-width: 481px) and (max-width: 768.98px) {
         padding-block:0;
        padding-inline:20px;
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto auto 1fr;
          grid-template-areas:
            "dockbar"
            "search"
            "tabs"
            "panel"
            "result";
        }

        @media (min-width: 769px) and (max-width: 1024px) {
          grid-template-columns: 1fr 2fr;
          grid-template-rows: auto auto auto auto 1fr;
          grid-template-areas:
            "dockbar dockbar"
            "search search"
            "tabs tabs"
            "filters panel"
            "filters result";
            "result";

        }

         @media (min-width: 1024px) and (max-width: 1280px) {
        grid-template-columns: 1.2fr 2.3fr 1.8fr;
        grid-template-rows: auto auto auto auto 1fr;
        }
      `, children: [_jsxs("div", { className: "openk9-navbar", css: css `
          grid-area: dockbar;
          padding: 8px 50px;
          margin: 0 -50px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          display: flex;
          align-items: center;
          background-color: var(
            --openk9-embeddable-search--primary-background-color
          );

          @media (max-width: 768.98px) {
            margin: 0 0px;
            padding: 8px 20px;
          }
        `, children: [_jsxs("div", { className: "openk9-navbar-container-logo", css: css `
            font-size: 20px;
            color: #1e1c21;
            display: flex;
            align-items: center;
          `, children: [_jsx("span", { className: "openk9-navbar-logo", css: css `
              color: var(--openk9-embeddable-search--primary-color);
              margin-right: 8px;
            `, children: _jsx(Logo, { size: 32 }) }), _jsx("span", { children: "Open" }), _jsx("span", { className: "openk9-navbar-name-logo", css: css `
              font-weight: 700;
            `, children: "K9" })] }), _jsxs("div", { css: css `
            flex-grow: 1;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            align-items: center;
          `, children: [_jsx("div", { className: "openk9-navbar-login", ref: (element) => openk9.updateConfiguration({ login: element }) }), _jsx("div", { className: "openk9-navbar-change-language", ref: (element) => openk9.updateConfiguration({ changeLanguage: element }) })] })] }), _jsx("div", { css: css `
          grid-area: search;
          padding-top: 16px;
          padding-bottom: 8px;
          @media (max-width: 768.98px) {
            padding-inline: 16px;
          }
        `, children: _jsxs("div", { css: css `
            display: flex;
            gap: 10px;
            width: 100%;
            justify-content: center;
            align-items: baseline;

            @media (max-width: 768.98px) {
              flex-direction: column;
            }
          `, children: [_jsx("div", { css: css `
              display: flex;
              gap: 18px;
              align-items: flex-end;
              width: 100%;
            `, className: "openk9-update-configuration-search", ref: (element) => openk9.updateConfiguration({ searchWithButton: element }) }), _jsxs("div", { css: css `
              width: 100%;
              display: flex;
              gap: 1%;
              flex-wrap: wrap;

              @media (min-width: 769px) {
                display: none;
              }
            `, className: "openk9-update-configuration", children: [isCalendarEnabled && (_jsxs("div", { css: css `
                  display: flex;
                  background-color: white;
                  border-radius: 50px;
                  border: 1px solid #ced4da;
                  justify-content: space-between;
                  align-items: center;
                  padding: 8px 12px;
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                `, children: [_jsxs("div", { css: css `
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    flex: 1;
                  `, onClick: () => setIsVisibleCalendar(true), children: [_jsx(CalendarMobileSvg, {}), _jsxs("div", { css: css `
                      display: flex;
                      align-items: center;
                      gap: 10px;
                      flex: 1;
                    `, onClick: () => setIsVisibleCalendar(true), children: [_jsx("div", { css: css `
                        white-space: nowrap;
                        color: #495057;
                        font-size: 14px;
                      `, children: startDate === null
                                                                ? t("choose-a-date")
                                                                : moment(startDate).format("DD MMM YYYY") }), endDate !== null && (_jsx("div", { css: css `
                          height: 20px;
                          width: 1px;
                          background-color: #ced4da;
                        ` })), _jsx("div", { css: css `
                        white-space: nowrap;
                        color: #495057;
                        font-size: 14px;
                      `, children: endDate === null
                                                                ? ""
                                                                : moment(endDate).format("DD MMM YYYY") })] })] }), startDate !== null && (_jsx("div", { onClick: () => {
                                                setStartDate(null);
                                                setEndDate(null);
                                                setIsClickReset(true);
                                            }, css: css `
                      margin-left: 10px;
                      cursor: pointer;
                      display: flex;
                      align-items: center;
                    `, children: _jsx(DeleteLogo, {}) }))] })), _jsx("button", { css: css `
                padding: 6px 10px;
                border: 1px solid var(--openk9-embeddable-search--border-color);
                background: white;
                border-radius: 50px;

                @media (min-width: 769px) {
                  display: none;
                }
              `, onClick: () => setIsVisibleFilters(true), children: _jsx(FilterHorizontalSvg, {}) }), isGenerativeEnabled && searchText !== undefined && (_jsx("div", { css: css `
                  padding-block: 8px;
                  @media (min-width: 769px) {
                    display: none;
                  }
                `, children: _jsx("button", { onClick: () => setIsPanelVisible(!isPanelVisible), css: css `
                    justify-self: center;
                    border: 1px solid
                      var(--openk9-embeddable-search--primary-color);
                    border-radius: 20px;
                    background: var(--openk9-embeddable-search--primary-color);
                    border: 1px solid
                      var(--openk9-embeddable-search--primary-color);
                    border-radius: 20px;
                    color: white;
                    gap: 10px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    padding: 6px 10px;
                    @media (min-width: 769px) {
                      display: none;
                    }
                  `, children: isGenerativeEnabled && isPanelVisible ? (_jsxs(_Fragment, { children: ["Chiudi ", _jsx(Logo, {})] })) : (_jsx(_Fragment, { children: _jsx(Logo, {}) })) }) }))] })] }) }), _jsxs("div", { className: "openk9-container-tabs", css: css `
          grid-area: tabs;
          overflow: auto;
          padding-top: 8px;
          padding-bottom: 16px;
          height: max-content;
          @media (max-width: 768.98px) {
            display: none;
          }
        `, children: [_jsx("div", { ref: (element) => openk9.updateConfiguration({ tabs: element }) }), _jsx("div", { ref: (element) => openk9.updateConfiguration({
                            correction: {
                                element,
                                information: (cor, err, call, hasCorrectedSearch, callbackCorrected) => {
                                    return (_jsx(_Fragment, { children: _jsx("div", { css: css `
                          display: flex;
                          align-items: center;
                          gap: 12px;
                          border-radius: 8px;
                          font-size: 15px;
                          color: var(--openk9-embeddable-search--primary-color);
                        `, "aria-live": "polite", children: hasCorrectedSearch ? (_jsxs("span", { children: [t("search-done-with"), _jsx("strong", { css: css `
                                color: var(
                                  --openk9-embeddable-search--primary-color
                                );
                              `, children: `“${cor}”` }), t("use-instead"), _jsx("button", { onClick: call, css: css `
                                border: unset;
                                background: var(
                                  --openk9-embeddable-search--primary-light-color
                                );
                                color: white;
                                border-radius: 8px;
                                padding: 4px 12px;
                                font-weight: 600;
                                cursor: pointer;
                                font-size: 15px;
                              `, children: `“${err}”` }), "."] })) : (_jsxs("span", { children: [t("your-search-did-you-mean"), " ", _jsx("button", { onClick: callbackCorrected, css: css `
                                border: unset;
                                background: var(
                                  --openk9-embeddable-search--primary-light-color
                                );
                                color: white;
                                border-radius: 8px;
                                padding: 4px 12px;
                                font-weight: 600;
                                cursor: pointer;
                                font-size: 15px;
                              `, children: `“${cor}”` }), "."] })) }) }));
                                },
                            },
                        }) })] }), _jsx("div", { className: "openk9-filters-mobile-container openk9-box", ref: (element) => openk9.updateConfiguration({
                    filtersMobileLiveChange: {
                        element,
                        isVisible: isVisibleFilters,
                        setIsVisible: setIsVisibleFilters,
                        viewTabs: true,
                    },
                }) }), _jsxs("div", { className: "openk9-detail-container-title box-title", css: css `
          grid-area: filters;
          width: 100%;
          background: white;
          display: flex;
          flex-direction: column;
          gap: 3px;
          box-sizing: border-box;
          border-radius: 8px;
          @media (max-width: 768.98px) {
            display: none;
          }
        `, children: [_jsxs("div", { className: "openk9-icon-and-title-filters", css: css `
            display: flex;
            gap: 5px;
            padding: 16px;
          `, children: [_jsx("div", { children: _jsx(FilterSvg, { size: 14 }) }), _jsx("h2", { id: "title-preview-openk9", tabIndex: 0, className: "openk9-detail-class-title", css: css `
              font-style: normal;
              font-weight: 700;
              font-size: 16px;
              height: 18px;
              line-height: 22px;
              align-items: center;
              margin: 0;
            `, children: t("filters") })] }), _jsx("div", { ref: (element) => openk9.updateConfiguration({
                            removeFiltersConfigurable: {
                                element,
                                itemsRemove: ["filters", "calendar"],
                            },
                        }), css: css `
            display: flex;
            justify-content: center;
            align-items: center;
            padding-inline: 16px;
          }` }), isCalendarEnabled && (_jsxs("div", { css: css `
              padding-inline: 16px;
              padding-top: 16px;
            `, children: [_jsxs("div", { className: "openk9-filter-category-title", css: css `
                user-select: none;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                padding: 6px 0;
              `, children: [_jsx("legend", { className: "data-range-filter", css: css `
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  :first-letter {
                    text-transform: uppercase;
                  }
                `, children: _jsx("strong", { className: "name-category-filter", css: css `
                    font-size: 14px;
                    letter-spacing: 0.2px;
                    color: var(--openk9-embeddable-search--secondary-text-color);
                  `, children: "Calendar" }) }), _jsx("div", { css: css `
                  display: flex;
                  align-items: center;
                  gap: 8px;
                `, children: _jsx("button", { className: `openk9-mobile-collapsable-filters openk9-collapsable-filters ${isOpenCalendar
                                                ? "openk9-dropdown-filters-open"
                                                : "openk9-dropdown-filters-close"}`, "aria-label": t("openk9-collapsable-filter") || "openk9 collapsable filter", "aria-expanded": isOpenCalendar ? "true" : "false", css: css `
                    background: transparent;
                    border: 1px solid
                      var(--openk9-embeddable-search--border-color);
                    border-radius: 8px;
                    padding: 6px 8px;
                    cursor: pointer;
                    transition: transform 120ms ease, background-color 120ms ease,
                      border-color 120ms ease;
                    &:hover {
                      background: rgba(0, 0, 0, 0.03);
                    }
                    &:active {
                      transform: translateY(1px);
                    }
                  `, onClick: () => setIsOpenCalendar(!isOpenCalendar), children: _jsx(FontAwesomeIcon, { className: "icon-search icon-search-filters", icon: isOpenCalendar ? faChevronUp : faChevronDown, style: {
                                                    color: "var(--openk9-embeddable-search--secondary-icon-color)",
                                                    cursor: "pointer",
                                                } }) }) })] }), _jsx("span", { role: "separator", "aria-hidden": "true", css: css `
                display: flex;
                height: 1px;
                background: var(--openk9-embeddable-search--border-color);
                margin: 4px 0;
                list-style: none;
                width: 100%;
              ` })] })), isCalendarEnabled && isOpenCalendar && (_jsx("div", { css: css `
              padding-inline: 16px;
            `, ref: (element) => openk9.updateConfiguration({
                            dataRangePickerVertical: { element },
                        }) })), _jsx("div", { className: "openk9-filters-container openk9-box", ref: (element) => openk9.updateConfiguration({
                            filtersConfigurable: { element },
                        }), css: css `
            display: flex;
            height: max-content;
            background-color: inherit;
            border-radius: 8px;
            overflow: auto;
            flex-direction: column;
            @media (max-width: 768.98px) {
              display: none;
            }
          ` })] }), isGenerativeEnabled && searchText !== undefined && (_jsxs("div", { css: css `
            grid-area: panel;
            display: flex;
            flex-direction: column;
            @media (max-width: 768.98px) {
              margin-inline: 5%;
            }
          `, children: [_jsx("div", { css: css `
              background: white;
              display: flex;
              justify-content: flex-end;
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
              border-bottom-left-radius: ${!isPanelVisible ? "10px" : "unset"};
              border-bottom-right-radius: ${!isPanelVisible ? "10px" : "unset"};
            `, children: _jsx("button", { onClick: () => setIsPanelVisible(!isPanelVisible), css: css `
                justify-self: center;
                border: 1px solid var(--openk9-embeddable-search--primary-color);
                background: var(--openk9-embeddable-search--primary-color);
                border: 1px solid var(--openk9-embeddable-search--primary-color);
                border-radius: 8px;
                padding: 8px;
                color: white;
                gap: 10px;
                cursor: pointer;
                display: flex;
                align-items: center;
                margin: 10px;
                @media (max-width: 768.98px) {
                  display: none;
                }
              `, children: isPanelVisible ? (_jsxs(_Fragment, { children: ["Chiudi Risposta Generata ", _jsx(Logo, {})] })) : (_jsxs(_Fragment, { children: ["Apri Risposta Generata ", _jsx(Logo, {})] })) }) }), isGenerativeEnabled && (_jsx("div", { ref: (element) => openk9.updateConfiguration({
                            generateResponse: element,
                        }), css: css `
                color: black;
                display: ${isPanelVisible ? "block" : "none"};
              ` }))] })), _jsx("div", { className: "openk9-results-container openk9-box", ref: (element) => openk9.updateConfiguration({
                    resultList: {
                        element,
                        changeOnOver: true,
                    },
                }), css: css `
          grid-area: result;
          margin-top: ${searchText !== undefined && isGenerativeEnabled
                    ? "20px"
                    : "unset"};
          overflow: auto;
          display: flex;
          flex-direction: column;
          gap: 10px;

          @media (max-width: 768.98px) {
            padding-inline: 16px;
            gap: 10px;
          }
        `, children: _jsxs("div", { css: css `
              display: flex;
              justify-content: space-between;
              background-color: white;
              align-items: center;
              border-radius: 8px;
              @media (max-width: 768.98px) {
                flex-direction: column;
                align-items: flex-start;
                padding: 16px;
              }
            `, children: [_jsxs("div", { css: css `
                padding: 16px;
                font-weight: 700;
                width: 100%;
                @media (max-width: 768.98px) {
                  padding: 0;
                  padding-bottom: 8px;
                }
              `, children: [t("number-of-results"), _jsx("span", { css: css `
                  color: var(--openk9-embeddable-search--primary-color);
                  margin-left: 5px;
                `, children: numberOfResults })] }), _jsx("div", { ref: (element) => openk9.updateConfiguration({
                                sortResults: { element },
                            }) })] }) }), isCalendarEnabled && (_jsx("div", { className: "openk9-results-container openk9-box", ref: (element) => openk9.updateConfiguration({
                    calendarMobile: {
                        element,
                        isVisible: isVisibleCalendar,
                        setIsVisible: setIsVisibleCalendar,
                        startDate,
                        setStartDate,
                        endDate,
                        setEndDate,
                        focusedInput,
                        setFocusedInput,
                        isCLickReset: isClickReset,
                        setIsCLickReset: setIsClickReset,
                    },
                }) })), _jsx("div", { className: "openk9-preview-container openk9-box", ref: (element) => openk9.updateConfiguration({ details: element }), css: css `
          grid-area: detail;
          overflow-y: auto;
          overflow-x: hidden;
          background-color: var(
            --openk9-embeddable-search--primary-background-color
          );
          border-radius: 8px;
          margin-top: ${searchText !== undefined && isGenerativeEnabled
                    ? "20px"
                    : "unset"};

          @media (max-width: 1024px) {
            display: none;
          }
        ` }), _jsx("div", { ref: (element) => openk9.updateConfiguration({ detailMobile: element }) }), isChatbotEnabled && (_jsx("div", { css: css `
            position: absolute;
            bottom: 20px;
            right: 20px;
          `, children: _jsx(Chatbot, { icon: {
                        buttonIcon: _jsx(Logo, { size: 35, color: "white" }),
                        userIcon: _jsx(User, {}),
                        chatbotIcon: _jsx(Logo, { size: 25, color: "#c22525" }),
                        refreshChatIcon: _jsx(TrashIcon, {}),
                        searchIcon: (_jsx(FontAwesomeIcon, { className: "openk9--search-icon", icon: faSearch, css: css `
                    opacity: 0.5;
                    color: var(
                      --openk9-embeddable-search--secondary-text-color
                    );
                  ` })),
                        logoIcon: _jsx(Logo, { size: 35, color: "#c22525" }),
                        closeIcon: _jsx(CloseIcon, { size: 25, color: "white" }),
                        closeModal: _jsx(CloseIcon, { size: 18, color: "#c22525" }),
                    } }) }))] }));
}
function useServiceStatus() {
    const [serviceStatus, setServiceStatus] = React.useState("up");
    React.useEffect(() => {
        openk9.client.getServiceStatus().then(setServiceStatus);
    }, []);
    return serviceStatus;
}
