import { ClipboardCopy, FormGroup } from "@patternfly/react-core";
import { useTranslation } from "react-i18next";
import { HelpItem, useEnvironment } from "@keycloakify/keycloak-admin-ui/ui-shared";
import { useRealm } from "@keycloakify/keycloak-admin-ui/context/realm-context/RealmContext";
import { addTrailingSlash } from "@keycloakify/keycloak-admin-ui/util";

export const RedirectUrl = ({ id }: { id: string }) => {
  const { environment } = useEnvironment();
  const { t } = useTranslation();

  const { realm } = useRealm();
  const callbackUrl = `${addTrailingSlash(
    environment.serverBaseUrl,
  )}realms/${realm}/broker`;

  return (
    <FormGroup
      label={t("redirectURI")}
      labelIcon={
        <HelpItem helpText={t("redirectURIHelp")} fieldLabelId="redirectURI" />
      }
      fieldId="kc-redirect-uri"
    >
      <ClipboardCopy
        isReadOnly
      >{`${callbackUrl}/${id}/endpoint`}</ClipboardCopy>
    </FormGroup>
  );
};