import useTranslation from "next-translate/useTranslation";
import router from "next/router";
import Link from "next/link";
import { logoutClient } from "../../lib/auth/logoutClient";

const ServiceBanner = (props) => {
    props = props.props;
    let { t, lang } = useTranslation();

    const handleLogout = (locale) => {
        console.info("////////////\n" + "logout" + "\n////////////");
        logoutClient(locale);
    };

    const portalLogoLink = [
        "/myportal/[appealtypes]",
        "/newappeal",
        "/newappeal/[appealtypes]",
        "/myportal/representation"
    ];
    return (
        <div className="servicebanner myportal govuk-!-margin-bottom-4">
            <h1>
                {portalLogoLink.includes(router.pathname) ? (
                    <Link href={"/myportal"}>
                        <img
                            className={
                                router.locale == "cy"
                                    ? "serviceTitle cy"
                                    : "serviceTitle"
                            }
                            src={
                                router.locale == "cy"
                                    ? "/assets/images/planning-casework-cy.svg"
                                    : "/assets/images/planning-casework-en.svg"
                            }
                            alt={
                                router.locale == "cy"
                                    ? "Fy mhorth"
                                    : "My Portal"
                            }
                        />
                    </Link>
                ) : (
                    <img
                        className={
                            router.locale == "cy"
                                ? "serviceTitle cy"
                                : "serviceTitle"
                        }
                        src={
                            router.locale == "cy"
                                ? "/assets/images/planning-casework-cy.svg"
                                : "/assets/images/planning-casework-en.svg"
                        }
                        alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"}
                    />
                )}
            </h1>
            <div className="serviceBanner_userDetails">
                <img
                    className="user_logo"
                    src="/assets/images/user.svg"
                    alt={router.locale == "cy" ? "Defnyddiwr" : "User"}
                />{" "}
                <div className="serviceBanner_userDetails_name">
                    <Link
                        href="/account/personaldetails"
                        className="govuk-button-secondary govuk-link"
                    >
                        {props.accountDetails.accountDetails.firstname}{" "}
                        {props.accountDetails.accountDetails.lastname}
                        {/* {" - "}
                        {
                            props.accountDetails.accountDetails[
                                "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
                            ]
                        } */}
                    </Link>
                </div>
                <div>
                    <Link
                        href={
                            router.locale == "cy" ? "/cy/allgofnodi" : "/logout"
                        }
                        onClick={() => {
                            handleLogout(router.locale);
                        }}
                        className="govuk-header__link "
                    >
                        {t("common:signout-label")}
                    </Link>
                </div>
            </div>
        </div>
    );
};

export default ServiceBanner;