/*
 * Copyright (c) 2020 - present Cloudogu GmbH
 *
 * 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, version 3.
 *
 * 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 https://www.gnu.org/licenses/.
 */

import React, { FC } from "react";
import { Feedback, Links, Me } from "@scm-manager/ui-types";
import { useIndex } from "@scm-manager/ui-api";
import { ExtensionPoint, extensionPoints, useBinder } from "@scm-manager/ui-extensions";
import { AvatarImage } from "../avatar";
import NavLink from "../navigation/NavLink";
import FooterSection from "./FooterSection";
import styled from "styled-components";
import { EXTENSION_POINT } from "../avatar/Avatar";
import ExternalNavLink from "../navigation/ExternalNavLink";
import { useTranslation } from "react-i18next";
import { createAttributesForTesting } from "../devBuild";

type Props = {
  me?: Me;
  version: string;
  links: Links;
};

type TitleWithIconsProps = {
  title: string;
  icon: string;
};

const TitleWithIcon: FC<TitleWithIconsProps> = ({ icon, title }) => {
  return (
    <>
      <i className={`fas fa-${icon} fa-fw`} {...createAttributesForTesting(title)} /> {title}
    </>
  );
};

type TitleWithAvatarProps = {
  me: Me;
};

const VCenteredAvatar = styled(AvatarImage)`
  width: 1rem !important;
  height: 1rem !important;
  margin-right: 0.3em;
  padding-top: 0.2em;
  border-radius: 100%;
`;

const TitleWithAvatar: FC<TitleWithAvatarProps> = ({ me }) => (
  <div {...createAttributesForTesting(me.displayName)} className="is-flex">
    <div>
      <VCenteredAvatar person={me} representation="rounded" />
    </div>
    <div>{me.displayName}</div>
  </div>
);

const Footer: FC<Props> = ({ me, version, links }) => {
  const [t] = useTranslation("commons");
  const binder = useBinder();
  const index = useIndex();

  const extensionProps = { me, url: "/me", links };
  let meSectionTile;
  if (me) {
    if (binder.hasExtension<extensionPoints.AvatarFactory>(EXTENSION_POINT)) {
      meSectionTile = <TitleWithAvatar me={me} />;
    } else {
      meSectionTile = <TitleWithIcon title={me.displayName} icon="user-circle" />;
    }
  }

  return (
    <footer className="footer">
      <div className="section container">
        <div className="columns is-size-7">
          {me ? (
            <FooterSection title={meSectionTile}>
              <NavLink to="/me" label={t("footer.user.profile")} testId="footer-user-profile" />
              <NavLink to="/me/settings/theme" label={t("footer.user.theme")} testId="footer-user-theme" />
              <NavLink
                to="/me/settings/accessibility"
                label={t("footer.user.accessibility")}
                testId="footer-user-accessibility"
              />
              {me?._links?.password && (
                <NavLink to="/me/settings/password" label={t("profile.changePasswordNavLink")} />
              )}
              {me?._links?.publicKeys && (
                <NavLink to="/me/settings/publicKeys" label={t("profile.publicKeysNavLink")} />
              )}
              {me?._links?.apiKeys && <NavLink to="/me/settings/apiKeys" label={t("profile.apiKeysNavLink")} />}
              <ExtensionPoint<extensionPoints.ProfileSetting>
                name="profile.setting"
                props={extensionProps}
                renderAll={true}
              />
            </FooterSection>
          ) : null}
          <FooterSection title={<TitleWithIcon title={t("footer.information.title")} icon="info-circle" />}>
            <ExternalNavLink to="https://scm-manager.org/" label={`SCM-Manager ${version}`} />
            <ExternalNavLink to="https://scm-manager.org/cli/" label="CLI Client" />
            <ExtensionPoint name="footer.information" props={extensionProps} renderAll={true} />
          </FooterSection>
          <FooterSection title={<TitleWithIcon title={t("footer.support.title")} icon="life-ring" />}>
            <ExternalNavLink to="https://scm-manager.org/support/" label={t("footer.support.community")} />
            <ExternalNavLink to="https://platform.cloudogu.com/en/support/" label={t("footer.support.enterprise")} />
            {!(index.data?._embedded?.feedback as Feedback)?.disabled ? (
              <>
                <ExternalNavLink
                  to="https://community.cloudogu.com/c/scm-manager/bug-reports-scmm"
                  label={t("footer.support.bugReport")}
                />
                <ExternalNavLink
                  to="https://community.cloudogu.com/c/scm-manager/feature-requests-scmm"
                  label={t("footer.support.featureRequest")}
                />
              </>
            ) : null}
            <ExtensionPoint name="footer.support" props={extensionProps} renderAll={true} />
          </FooterSection>
        </div>
      </div>
    </footer>
  );
};

export default Footer;