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 { useMemo } from "react";
import Select, { components, } from "react-select";
import { css } from "styled-components";
import { GloboSvg } from "../svgElement/Globo";
export function ChangeLanguage({ setChangeLanguage, background = "white", minHeight = "40px", color = "#7e7e7e", languages, activeLanguage, }) {
    const options = useMemo(() => (languages ?? []).map((l) => ({
        value: l.value,
        name: l.name,
        icon: _jsx(GloboSvg, {}),
    })), [languages]);
    const startValue = useMemo(() => {
        const found = options.find((o) => o.value === activeLanguage);
        return found
            ? found
            : options[0]
                ? options[0]
                : { value: "", name: "Select Language", icon: _jsx(GloboSvg, {}) };
    }, [options, activeLanguage]);
    const handleChange = (opt) => {
        if (!opt)
            return;
        setChangeLanguage(opt.value);
    };
    const styles = {
        control: (base, state) => ({
            ...base,
            minHeight,
            borderRadius: 50,
            backgroundColor: background,
            border: state.isFocused || state.menuIsOpen
                ? "1px solid var(--openk9-embeddable-search--active-color)"
                : "1px solid white",
            boxShadow: state.isFocused || state.menuIsOpen
                ? "0 0 0 1px var(--openk9-embeddable-search--active-color)"
                : "none",
            ":hover": {
                border: "1px solid var(--openk9-embeddable-search--active-color)",
            },
        }),
        valueContainer: (base) => ({ ...base, paddingLeft: 12 }),
        menu: (base, state) => ({
            ...base,
            zIndex: state.selectProps.menuIsOpen ? 1000 : 1,
        }),
        option: (base, state) => ({
            ...base,
            backgroundColor: state.isFocused ? "#f4f4f4" : "white",
            color: state.isSelected ? "white" : "black",
            cursor: "pointer",
            ...(state.isSelected && { backgroundColor: "#d54949" }),
            ":hover": { backgroundColor: state.isSelected ? "#d54949" : "#e836362e" },
        }),
        indicatorSeparator: () => ({ display: "none" }),
        singleValue: (base) => ({ ...base, color }),
        placeholder: (base) => ({ ...base, color }),
    };
    const SingleValue = (props) => (_jsx(components.SingleValue, { ...props, children: _jsxs("div", { css: css `
          display: flex;
          align-items: center;
          gap: 6px;
        `, children: [_jsx(GloboSvg, {}), remappingLanguageToBack({ language: activeLanguage })] }) }));
    return (_jsx("span", { children: _jsx(Select, { value: startValue, options: options, components: { SingleValue }, onChange: handleChange, getOptionLabel: (o) => o.name, getOptionValue: (o) => o.value, styles: styles, isSearchable: false }) }));
}
function remappingLanguageToBack({ language }) {
    switch (language) {
        case "it_IT":
            return "ITA";
        case "pt_PT":
            return "PRT";
        case "es_ES":
            return "ESP";
        case "en_US":
            return "GBR";
        case "de_DE":
            return "DEU";
        case "fr_FR":
            return "FRA";
        default:
            return "GBR";
    }
}
