import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { DeleteLogo } from "./DeleteLogo";
import { css } from "styled-components";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import { capitalize } from "lodash";
import { useTranslation } from "react-i18next";
const OverlayScrollbarsComponentDockerFix = OverlayScrollbarsComponent; // for some reason this component breaks build inside docker
export function ActiveFilter({ searchQuery, onRemoveFilterToken, onConfigurationChange, actioneRemoveFilters, callbackRemoveFilter, }) {
    const { t } = useTranslation();
    if (searchQuery.length === 0)
        return null;
    const filterSearchQuery = searchQuery.filter((search) => "goToSuggestion" in search);
    const activeFilters = filterSearchQuery.length;
    if (activeFilters === 0)
        return null;
    return (_jsxs("div", { children: [_jsxs("h2", { className: "openk9-filters-active-information", css: css `
          @media (max-width: 769px) {
            font-size: 20px;
          }
        `, children: [t("active-filters"), ":", " ", _jsx("span", { className: "openk9-number-filters-active", css: css `
            color: #d6012e;
          `, children: countTotalValues(filterSearchQuery) })] }), _jsxs("div", { className: "openk9-active-container-box", css: css `
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          justify-content: space-between;
        `, children: [_jsx("div", { className: "openk9-tabs-overlay-scrollbars", children: _jsx("div", { className: "openk9-active-filters-chop-container", css: css `
              display: flex;
            `, children: _jsx("div", { className: "openk9-container-active-filters", css: css `
                display: flex;
                gap: 10px;
                width: 100%;
                flex-wrap: wrap;
              `, children: searchQuery.map((selectToken, index) => {
                                    if ("goToSuggestion" in selectToken) {
                                        return selectToken.values.map((value, valueIndex) => (_jsx(React.Fragment, { children: _jsx("div", { className: "openk9-container-active-filter", children: _jsxs("button", { className: "openk9-active-filter", onClick: () => {
                                                        onRemoveFilterToken({
                                                            ...selectToken,
                                                            values: [value],
                                                        });
                                                        if (callbackRemoveFilter)
                                                            callbackRemoveFilter();
                                                    }, css: css `
                            border: 1px solid red;
                            background: inherit;
                            padding: 3px 12px;
                            border-radius: 50px;
                            color: #bc0012;
                            font-weight: 700;
                            line-height: 24px;
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            white-space: nowrap;
                            cursor: pointer;
                          `, children: [_jsx("span", { className: "visually-hidden", 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: "rimuovi il filtro" }), capitalize(value), _jsx("span", { children: _jsx(DeleteLogo, { heightParam: 10, widthParam: 10, colorSvg: "#BC0012" }) })] }) }) }, valueIndex)));
                                    }
                                    return null;
                                }) }) }) }), searchQuery.length !== 0 && (_jsx("div", { children: _jsx("button", { className: "openk9-active-filter", css: css `
                border: none;
                background: inherit;
                padding: 3px 12px;
                border-radius: 50px;
                text-decoration: underline;
                line-height: 24px;
                display: flex;
                align-items: center;
                gap: 10px;
                white-space: nowrap;
                cursor: pointer;
              `, onClick: () => {
                                onConfigurationChange({ filterTokens: [] });
                                if (actioneRemoveFilters)
                                    actioneRemoveFilters();
                            }, children: t("remove-filters") }) }))] })] }));
}
function countTotalValues(arr) {
    return arr.reduce((total, token) => {
        if (token.values && token.values.length > 0) {
            total += token.values.length;
        }
        return total;
    }, 0);
}
