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 { useQuery } from "react-query";
import { css } from "styled-components";
import { useOpenK9Client } from "./client";
import _ from "lodash";
import { resetFilterCalendar } from "./DateRangePicker";
import CustomSkeleton from "./Skeleton";
function Tabs({ tabs, selectedTabIndex, onSelectedTabIndexChange, language, onAction, scrollMode = true, speed = 10, distance = 700, step = 30, reset, resetFilter, resetSort, selectionsDispatch, readMessageScreenReader, textLabelScreenReader, isUnselectTab = false, tabsCallbackProps, }) {
    const elementRef = React.useRef(null);
    const [arrowDisable, setArrowDisable] = React.useState(true);
    const [arrowRightDisable, setArrowRightDisable] = React.useState(false);
    let scrollAmount = 0;
    const handleHorizantalScroll = ({ element, step, }) => {
        element.scrollLeft += step;
        scrollAmount += Math.abs(step);
        if (element.scrollLeft === 0) {
            setArrowDisable(true);
        }
        else {
            setArrowDisable(false);
        }
    };
    const submitTab = (index) => {
        onSelectedTabIndexChange(index);
        if (reset) {
            if (reset.filters)
                resetFilter();
            if (reset?.calendar)
                resetFilterCalendar();
            if (reset?.search)
                selectionsDispatch({
                    type: "reset-search",
                });
            if (reset?.sort)
                resetSort();
        }
        if (onAction)
            onAction();
    };
    return !scrollMode ? (_jsxs("div", { css: css `openk9-container-arrow-tabs`, children: [_jsx("h2", { id: "title-tabs-openk9", className: `${readMessageScreenReader && "visually-hidden title-tabs-openk9"} title-tabs-openk9`, 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: textLabelScreenReader || "filtri e argomenti" }), _jsxs("ul", { className: "openk9-nav-container-tabs", ref: elementRef, role: "list", css: css `
          display: flex;
          padding: 0;
          overflow-x: hidden;
          white-space: nowrap;
          width: 90vw;
          margin-left: 15px;
          list-style-type: none;
          margin: 0;
        `, children: [_jsx("div", { className: "openk9-nav-container-left-button " + arrowRightDisable
                            ? "disabled"
                            : "not-disabled", css: css `
            position: absolute;
          `, children: !arrowDisable && (_jsx("button", { className: "openk9-button-left-tabs", css: css `
                padding: 8px 12px;
                border: 1px solid #80808082;
                background: #dbdbdb;
                opacity: 0.9;
                border-radius: 20px;
              `, onClick: () => {
                                handleHorizantalScroll({
                                    element: elementRef.current,
                                    distance,
                                    speed,
                                    step: -step,
                                });
                            }, children: "<" })) }), _jsx("div", { className: "openk9-nav-container-right-button " + arrowRightDisable
                            ? "disabled"
                            : "not-disabled", css: css `
            position: absolute;
            right: 8px;
          `, children: !arrowRightDisable && (_jsx("button", { className: "openk9-button-right-tabs", css: css `
                padding: 8px 12px;
                border: 1px solid #80808082;
                background: #dbdbdb;
                opacity: 0.9;
                border-radius: 20px;
                right: 0;
              `, onClick: () => {
                                handleHorizantalScroll({
                                    element: elementRef.current,
                                    distance,
                                    speed,
                                    step,
                                });
                            }, children: ">" })) }), tabs.map((tab, index) => {
                        const isSelected = selectedTabIndex !== -1 && index === selectedTabIndex;
                        const tabTraslation = translationTab({
                            language: language,
                            tabLanguages: tab.translationMap,
                            defaultValue: tab.label,
                        });
                        return (_jsx("li", { role: "listitem", "aria-labelledby": "title-tabs-openk9", children: _jsx("button", { className: `openk9-single-tab-container`, tabIndex: 0, css: css `
                  border: none;
                  background: none;
                `, children: _jsx("span", { className: "openk9-single-tab " +
                                        (isSelected ? "openk9-active-tab" : "openk9-not-active"), css: css `
                    white-space: nowrap;
                    padding: 8px 12px;
                    background: ${isSelected
                                        ? "var(--openk9-embeddable-search--primary-background-tab-color)"
                                        : "var(--openk9-embeddable-search--secondary-background-tab-color)"};
                    border-radius: 8px;
                    font: Helvetica Neue LT Std;
                    font-style: normal;
                    display: block;
                    color: ${isSelected
                                        ? "var(--openk9-embeddable-search--primary-background-color)"
                                        : "var(--openk9-embeddable-tabs--primary-color)"};
                    ${isSelected
                                        ? "var(--openk9-embeddable-search--active-color)"
                                        : "transparent"};
                    cursor: ${isSelected ? "" : "pointer"};
                    user-select: none;
                    :hover {
                      ${isSelected ? "" : "text-decoration: underline;"}
                    }
                  `, onClick: () => {
                                        onSelectedTabIndexChange(index);
                                        if (reset) {
                                            if (reset.filters)
                                                resetFilter();
                                            if (reset?.calendar)
                                                resetFilterCalendar();
                                            if (reset?.search)
                                                selectionsDispatch({
                                                    type: "reset-search",
                                                });
                                        }
                                        if (onAction)
                                            onAction();
                                    }, children: tabTraslation.toUpperCase() }) }) }, index));
                    })] })] })) : (_jsxs(React.Fragment, { children: [_jsx("h2", { id: "title-tabs-openk9", 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: textLabelScreenReader || "filtri e argomenti" }), _jsx("ul", { className: "openk9-tabs-container-internal", role: "list", css: css `
          display: flex;
          width: fit-content;
          padding: 0;
          height: fit-content;
          gap: 16px;
          margin: 0;
          list-style-type: none;
          margin: 0;
          @media (max-width: 480px) {
            gap: 10px;
          }
        `, children: tabsCallbackProps
                    ? tabsCallbackProps({
                        callbackSelectTab: ({ index }) => {
                            submitTab(index);
                        },
                        callbackUnselectTab: (index) => {
                            submitTab(index);
                        },
                        tabs,
                        selectedTabIndex: selectedTabIndex,
                    })
                    : tabs.map((tab, index) => {
                        const isSelected = index === selectedTabIndex;
                        const tabTraslation = translationTab({
                            language: language,
                            tabLanguages: tab.translationMap,
                            defaultValue: tab.label,
                        });
                        return (_jsx("li", { role: "listitem", "aria-labelledby": "title-tabs-openk9", children: _jsx("button", { className: "openk9-single-tab-container" +
                                    "openk9-single-tab " +
                                    (isSelected ? "openk9-active-tab" : "openk9-not-active"), tabIndex: 0, css: css `
                      border: none;
                      background: none;
                      padding: 0;
                      white-space: nowrap;
                      padding: 8px 12px;
                      background: ${isSelected
                                    ? "var(--openk9-embeddable-search--primary-background-tab-color)"
                                    : "var(--openk9-embeddable-search--secondary-background-tab-color)"};
                      border-radius: 8px;
                      font: Helvetica Neue LT Std;
                      font-style: normal;
                      display: block;
                      color: ${isSelected
                                    ? "var(--openk9-embeddable-search--primary-background-color)"
                                    : "var(--openk9-embeddable-tabs--primary-color)"};
                      ${isSelected
                                    ? "var(--openk9-embeddable-search--active-color)"
                                    : "transparent"};
                      cursor: ${isSelected ? "" : "pointer"};
                      user-select: none;
                      :hover {
                        ${isSelected ? "" : "text-decoration: underline;"}
                      }
                    `, onClick: () => {
                                    isSelected
                                        ? isUnselectTab && submitTab(-1)
                                        : submitTab(index);
                                }, children: tabTraslation.toUpperCase() }, index) }, "tabs" + index));
                    }) })] }));
}
export const TabsMemo = React.memo(Tabs);
export function useTabTokens() {
    const client = useOpenK9Client();
    const tabsByVirtualHostQuery = useQuery(["tabs-by-virtualhost"], ({ queryKey }) => {
        return client.getTabsByVirtualHost();
    });
    return {
        tab: tabsByVirtualHostQuery.data ?? [],
        isLoading: tabsByVirtualHostQuery.isLoading,
    };
}
export function translationTab({ language, tabLanguages, defaultValue, }) {
    const desiredKey = "name." + language;
    if (tabLanguages && tabLanguages.hasOwnProperty(desiredKey)) {
        return tabLanguages[desiredKey];
    }
    return defaultValue;
}
//utile nel caso bisogna tradurre i tab da inviare nella search query
export function translationTabValue({ language, tabLanguages, defaultValue, selectedTabIndex, }) {
    if (selectedTabIndex === 0)
        return defaultValue;
    const desiredKey = "label." + language;
    let tabClick = null;
    if (tabLanguages && tabLanguages.hasOwnProperty(desiredKey)) {
        tabClick = _.cloneDeep(defaultValue);
        tabClick[0] = {
            ...tabClick[0],
            values: [tabLanguages[desiredKey]],
        };
    }
    return tabClick || defaultValue;
}
export default function TabsSkeleton() {
    return (_jsx("div", { css: css `
        padding: 8px 16px;
      `, children: _jsx(CustomSkeleton, { height: "32px", counter: 3, position: "row", width: "100px", gap: "10px" }) }));
}
