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 { css } from "styled-components";
import React from "react";
import Select, { components } from "react-select";
import { useQuery } from "react-query";
import { useTranslation } from "react-i18next";
import { useOpenK9Client } from "../components/client";
import "./SortResultList.css";
function SortResultList({ setSortResult, relevance = "relevance", HtmlString = "", language, }) {
    const { t } = useTranslation();
    const client = useOpenK9Client();
    const startValue = React.useMemo(() => ({ value: relevance, name: relevance, icon: null }), [relevance]);
    const [myValue, setMyValue] = React.useState(startValue);
    const { data: labelSortData } = useQuery(["date-label-sort-options", {}], async () => await client.getLabelSort());
    React.useEffect(() => {
        setMyValue({ value: relevance, name: relevance, icon: null });
    }, [relevance]);
    const sortOptions = React.useMemo(() => {
        const base = [startValue];
        if (labelSortData?.length) {
            for (const option of labelSortData) {
                base.push({
                    value: JSON.stringify({ label: option.field, sort: "asc" }),
                    name: `${option.label} ${t("asc")}`,
                    icon: null,
                });
                base.push({
                    value: JSON.stringify({ label: option.field, sort: "desc" }),
                    name: `${option.label} ${t("desc")}`,
                    icon: null,
                });
            }
        }
        return base;
    }, [labelSortData, startValue, t]);
    const SingleValue = (props) => (_jsx(components.SingleValue, { ...props, children: _jsx("div", { css: css `
          display: flex;
          align-items: center;
          gap: 5px;
        `, children: props.children }) }));
    const handleChange = React.useCallback((event) => {
        if (event.value === relevance) {
            setSortResult(undefined);
        }
        else {
            setSortResult({ field: event.value.label, type: event.value.sort });
        }
        setMyValue(event);
    }, [relevance, setSortResult]);
    const customStyles = React.useMemo(() => ({
        control: (provided) => ({
            ...provided,
        }),
        menu: (provided, state) => ({
            ...provided,
            zIndex: state.selectProps.menuIsOpen ? 1000 : 1,
        }),
        option: (provided, state) => ({
            ...provided,
            backgroundColor: state.isFocused ? "#your-option-focus-color" : "white",
            color: "black",
            ":hover": {
                backgroundColor: state.isSelected ? "#d54949" : "#e836362e",
                cursor: "pointer",
            },
            ...(state.isSelected && {
                backgroundColor: "#d54949",
                color: "white",
            }),
        }),
        indicatorSeparator: () => ({
            display: "none",
        }),
    }), []);
    const onFocus = ({ focused }) => `${t("you-are-on")}${focused.name}`;
    return (_jsxs("span", { className: "openk9-container-sort-result-list-component", children: [!HtmlString && (_jsx("label", { className: "visually-hidden", htmlFor: "defaultSort", css: css `
            border: 0;
            padding: 0;
            margin: 0;
            position: absolute !important;
            height: 1px;
            width: 1px;
            overflow: hidden;
            clip: rect(1px, 1px, 1px, 1px);
            clip-path: inset(50%);
            white-space: nowrap;
          `, children: "Ordinamento" })), relevance && (_jsx(Select, { tabIndex: 0, inputId: HtmlString || "defaultSort", "aria-label": "", "aria-labelledby": "", ariaLiveMessages: { onFocus }, className: "openk9-react-select-container", classNamePrefix: "openk9-react-select", options: sortOptions, components: { SingleValue }, onChange: handleChange, getOptionLabel: (e) => e.name, getOptionValue: (e) => String(e.value), value: myValue, styles: customStyles }))] }));
}
export const SortResultListMemo = React.memo(SortResultList);
