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 { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { capitalize } from "lodash";
import "overlayscrollbars/css/OverlayScrollbars.css";
import React from "react";
import { useTranslation } from "react-i18next";
import { css } from "styled-components";
import { AddFiltersSvg } from "../svgElement/AddFiltersSvg";
import { FilterSvg } from "../svgElement/FiltersSvg";
import { TrashSvg } from "../svgElement/TrashSvg";
import { DeleteLogo } from "./DeleteLogo";
import { FiltersMemo } from "./Filters";
import { ModalDetail } from "./ModalDetail";
import { translationTab } from "./Tabs";
import { useFocusTrap } from "./useFocusTrap";
import { useRange } from "./useRange";
function FiltersMobileLiveChange({ dynamicFilters, searchQuery, sort, addExtraClass, onAddFilterToken, onRemoveFilterToken, onConfigurationChange, configuration, isVisibleFilters, setIsVisibleFilters, tabs, onSelectedTabIndexChange, selectedTabIndex, language, viewTabs = false, sortAfterKey, isCollapsable = true, numberOfResults, whoIsDynamic, numberItems, isActiveSkeleton, skeletonCategoryCustom, selectionsDispatch, memoryResults, haveSearch, callbackClose, callbackApply, state, }) {
    const { t } = useTranslation();
    const [trapFocus] = useFocusTrap(true);
    const { overrideSearchWithCorrection, setOverrideSearchWithCorrection } = useRange();
    const componet = (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "openk9-filter-list-container-first-title container-openk9-filter-mobile-live-change live-change ", css: css `
          display: flex;
          justify-content: space-beetween;
          background: white;
          justify-content: baseline;
        `, children: [_jsx("div", { className: "openk9-filter-list-container-title box-title live-change-box", css: css `
            padding: 0px 16px;
            width: 100%;
            background: white;
            padding-top: 20px;
            padding-bottom: 13px;
            display: flex;
          `, children: _jsxs("div", { className: "openk9-filter-list-container-internal-title live-change-title", css: css `
              display: flex;
              gap: 5px;
            `, children: [_jsx("span", { children: _jsx(FilterSvg, {}) }), _jsx("span", { className: "openk9-filters-list-title title  live-change-title-span", children: _jsx("h2", { css: css `
                  font-style: normal;
                  font-weight: 700;
                  font-size: 18px;
                  height: 18px;
                  line-height: 22px;
                  display: flex;
                  align-items: center;
                  color: #3f3f46;
                  margin: 0;
                `, children: t("filters") }) })] }) }), _jsxs("button", { className: "openk9-filters-list-button-close", "aria-label": t("close") || "close", css: css `
            color: var(--openk9-grey-stone-600);
            font-size: 15px;
            font-family: Nunito Sans;
            font-weight: 700;
            line-height: 12px;
            display: flex;
            align-items: center;
            gap: 9px;
            margin-right: 21px;
            background-color: white;
            border: none;
          `, onClick: () => {
                            if (setIsVisibleFilters)
                                setIsVisibleFilters(false);
                            if (callbackClose)
                                callbackClose();
                        }, children: [t("close"), " ", _jsx(DeleteLogo, { heightParam: 8, widthParam: 8 })] })] }), _jsx("div", { className: "openk9-filter-overlay-scrollbars", css: css `
          overflow-y: auto;
          height: calc(100vh - 210px);
          border-radius: 8px;
        `, children: _jsx(FiltersMemo, { state: state, memoryResults: memoryResults, iconCustom: null, searchQuery: searchQuery, onAddFilterToken: onAddFilterToken, onRemoveFilterToken: onRemoveFilterToken, sort: sort, isDynamicElement: whoIsDynamic, language: language, sortAfterKey: sortAfterKey, numberOfResults: numberOfResults, numberItems: numberItems, skeletonCategoryCustom: skeletonCategoryCustom, isActiveSkeleton: isActiveSkeleton, haveSearch: haveSearch, preFilters: viewTabs ? (_jsx(ViewAllTabs, { tabs: tabs, onSelectedTabIndexChange: onSelectedTabIndexChange, selectedTabIndex: selectedTabIndex, language: language })) : null, overrideSearchWithCorrection: overrideSearchWithCorrection, setOverrideSearchWithCorrection: setOverrideSearchWithCorrection }) }), _jsxs("footer", { className: "openk9-filter-horizontal-container-submit", css: css `
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 10px;
          background: white;
          @media (max-width: 480px) {
            padding-inline: 20px;
            flex-direction: column;
          }
          @media (min-width: 481px) and (max-width: 768px) {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 180px;
          }
        `, children: [_jsxs("button", { className: "openk9-filter-horizontal-submit openk9-filter-button-mobile-remove", "aria-label": t("remove-filters") || "remove filters", css: css `
            font-size: smaller;
            height: 52px;
            padding: 8px 12px;
            white-space: nowrap;
            border: 1px solid #d6012e;
            background-color: #d6012e;
            border-radius: 5px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 3px;
            @media (max-width: 480px) {
              background: white;
              border: 1px solid #d6012e;
              width: 100%;
              height: auto;
              margin-top: 20px;
              color: black;
              border-radius: 50px;
              display: flex;
              justify-content: center;
              color: var(--red-tones-500, #c0272b);
              text-align: center;
              font-size: 16px;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
              align-items: center;
            }
          `, onClick: () => {
                            onConfigurationChange({ filterTokens: [] });
                            if (setIsVisibleFilters)
                                setIsVisibleFilters(false);
                            callbackClose && callbackClose();
                            if (selectionsDispatch)
                                selectionsDispatch({ type: "reset-filters" });
                        }, children: [_jsxs("div", { children: [t("remove-filters"), " "] }), _jsx("div", { children: _jsx(TrashSvg, { size: "18px" }) })] }), _jsxs("button", { className: "openk9-filter-horizontal-submit openk9-filter-button-mobile-apply", "aria-label": "applica filtri", css: css `
            font-size: smaller;
            height: 52px;
            padding: 8px 12px;
            white-space: nowrap;
            border: 1px solid #d6012e;
            background-color: #d6012e;
            border-radius: 5px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 3px;
            @media (max-width: 480px) {
              background: #d6012e;
              border: 1px solid #d6012e;
              width: 100%;
              height: auto;
              margin-top: 20px;
              color: white;
              border-radius: 50px;
              display: flex;
              justify-content: center;
              text-align: center;
              font-size: 16px;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
            }
          `, onClick: () => {
                            if (setIsVisibleFilters)
                                setIsVisibleFilters(false);
                            callbackApply && callbackApply();
                        }, children: [_jsxs("div", { children: [t("result-view"), " ", numberOfResults, numberOfResults !== 1 ? t("results") : t("result")] }), _jsx("div", { children: _jsx(AddFiltersSvg, { size: "21px" }) })] })] })] }));
    if (!isVisibleFilters)
        return null;
    return (_jsx("div", { className: "modal-detail-container-external " + addExtraClass, ref: trapFocus, children: _jsx(ModalDetail, { padding: "0px", background: "white", content: componet }) }));
}
function ViewAllTabs({ tabs, onSelectedTabIndexChange, selectedTabIndex, isCollapsable = true, language, }) {
    const [isOpen, setIsOpen] = React.useState(true);
    const { t } = useTranslation();
    return (_jsxs("div", { className: "openk9-filter-tabs-container", css: css `
        margin-left: 16px;
      `, children: [_jsxs("div", { className: "openk9-filter-category-title", css: css `
          user-select: none;
          display: flex;
          align-items: center;
          width: 100% !important;
        `, onClick: () => (isCollapsable ? setIsOpen(!isOpen) : null), children: [_jsx("div", { css: css `
            flex-grow: 1;
            :first-letter {
              text-transform: uppercase;
            }
          `, children: _jsx("strong", { children: "Tabs" }) }), isCollapsable && (_jsx("button", { className: `openk9-mobile-collapsable-filters openk9-collapsable-filters openk9-tabs-in-filters ${isOpen
                            ? "openk9-dropdown-filters-open"
                            : "openk9-dropdown-filters-close"}`, "aria-label": t("openk9-collapsable-filter") || "openk9 collapsable filter", css: css `
              background: inherit;
              border: none;
            `, children: _jsx(FontAwesomeIcon, { icon: isOpen ? faChevronDown : faChevronUp, css: css `
                color: var(--openk9-embeddable-search--secondary-text-color);
                font-size: 15px;
              ` }) }))] }), _jsx("ul", { className: "openk9-filter-tabs-list", css: css `
          padding: 0px;
          margin: 10px 0px;
        `, children: isOpen &&
                    tabs.map((tab, index) => {
                        const tabTraslation = translationTab({
                            language: language,
                            tabLanguages: tab.translationMap,
                            defaultValue: tab.label,
                        });
                        return (_jsx("li", { className: "openk9-filter-tabs-list-item", css: css `
                  display: flex;
                  gap: 10px;
                `, children: _jsxs("div", { className: "openk9-radio", css: css `
                    display: flex;
                    align-items: center;
                    gap: 8px;
                  `, children: [_jsx("input", { className: `radio-button ${selectedTabIndex === index
                                            ? "filter-category-radio-checked"
                                            : "not-checked-filter-category"}`, id: "tabs" + index, type: "radio", checked: selectedTabIndex === index, onClick: () => {
                                            onSelectedTabIndexChange(index);
                                        }, css: css `
                      appearance: none;
                      width: 17px;
                      height: 16px;
                      border-radius: 50%;
                      border: 2px solid #ccc;
                      background-color: ${selectedTabIndex === index
                                            ? "var(--openk9-embeddable-search--secondary-active-color) "
                                            : "#fff "};
                      cursor: pointer;
                    ` }), _jsx("label", { htmlFor: "tabs" + index, css: css `
                      text-overflow: ellipsis;
                      font-style: normal;
                      font-weight: 600;
                      line-height: 22px;
                      color: #000000;
                    `, children: capitalize(tabTraslation) })] }) }));
                    }) })] }));
}
export const FiltersMobileLiveChangeMemo = React.memo(FiltersMobileLiveChange);
