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 { css } from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faRightFromBracket } from "@fortawesome/free-solid-svg-icons/faRightFromBracket";
import { useOpenK9Client } from "./client";
import { useQuery } from "react-query";
import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
import { useClickAway } from "./useClickAway";
import { LoginLogo } from "./LogoLogin";
import { CreateLabel } from "./Filters";
import { useTranslation } from "react-i18next";
function LoginInfoComponent({ isMobile = false }) {
    const client = useOpenK9Client();
    const [authenticated, setAuthenticated] = React.useState(false);
    React.useEffect(() => {
        if (client.authInit)
            client.authInit.then(setAuthenticated);
    }, []);
    const userProfileQuery = useQuery(["user-profile"], async () => {
        const data = await client.getUserProfile();
        return data;
    });
    const [isOpen, setIsOpen] = React.useState(false);
    const dropdownRef = React.useRef(null);
    const { t } = useTranslation();
    useClickAway([dropdownRef], () => {
        setIsOpen(false);
    });
    if (!authenticated && !isMobile) {
        return (_jsx(CreateLabel, { svgIcon: _jsx(LoginLogo, { colorFill: "#000000" }), label: "Login", marginOfSvg: "10px", sizeFont: "16px", colorLabel: "black", sizeHeight: "38px", align: "center", padding: "15px 12px", fontWeightLabel: "700", action: () => {
                client.authenticate({});
            } }));
    }
    if (!authenticated && isMobile) {
        return (_jsx(CreateLabel, { svgIcon: _jsx(LoginLogo, { colorFill: "#000000" }), label: "", marginOfSvg: "", sizeFont: "16px", colorLabel: "black", sizeHeight: "38px", align: "center", padding: "15px 12px", fontWeightLabel: "700", gap: "0px", action: () => {
                client.authenticate({});
            } }));
    }
    else {
        return (_jsxs("div", { ref: dropdownRef, css: css `
          position: relative;
        `, children: [_jsx("button", { css: css `
            ${buttonStyle};
            background: ${"var(--openk9-embeddable-search--secondary-active-color)"};
            cursor: pointer;
          `, onClick: () => {
                        setIsOpen(!isOpen);
                    }, children: _jsx(LoginLogo, {}) }), isOpen && (_jsxs("div", { css: css `
              position: absolute;
              right: 16px;
              background-color: var(
                --openk9-embeddable-search--primary-background-color
              );
              border: 1px solid var(--openk9-embeddable-search--border-color);
              z-index: 1;
              border-radius: 4px;
              width: 245px;
              height: 95px;
              overflow: hidden;
              @media (max-width: 380px) {
                width: 160px;
              }
            `, children: [_jsxs("div", { css: css `
                padding: 3px 16px 0px 16px;
                border-bottom: 1px solid
                  var(--openk9-embeddable-search--border-color);
              `, children: [_jsx(FontAwesomeIcon, { icon: faUser }), "\u00A0", _jsx("span", { css: css `
                  font-family: "Helvetica";
                  font-style: normal;
                  font-weight: 400;
                  font-size: 14px;
                  line-height: 44px;
                  margin-left: 10px;
                  /* or 314% */

                  align-items: center;

                  color: #2e2f39;
                `, children: userProfileQuery?.data?.preferred_username })] }), _jsxs("div", { css: css `
                padding: 3px 16px 0px 16px;
                border-bottom: 1px solid
                  var(--openk9-embeddable-search--border-color);
                cursor: pointer;
              `, onClick: () => {
                                client.deauthenticate();
                            }, children: [_jsx(FontAwesomeIcon, { icon: faRightFromBracket }), "\u00A0", _jsx("span", { css: css `
                  font-family: "Helvetica";
                  font-style: normal;
                  font-weight: 700;
                  font-size: 14px;
                  line-height: 44px;
                  margin-left: 10px;
                  /* or 314% */
                  align-items: center;
                  color: #2e2f39;
                `, children: "Logout" })] })] }))] }));
    }
}
export const LoginInfoComponentMemo = React.memo(LoginInfoComponent);
const buttonStyle = css `
  padding: 4px 8px;
  color: inherit;
  :hover {
    color: var(--openk9-embeddable-search--primary-color);
  }
  background: var(--openk9-embeddable-search--primary-background-color);
  appearance: none;
  border: 1px solid var(--openk9-embeddable-search--primary-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: inherit;
`;
