import ThemedImage from "@/components/docusaurus/themed-image";

export default function ReviewConfig(props) {
  let clientObjects = [];
  if (clientID(props.appType, props.authType)) {
    clientObjects.push("id");
  }
  if (clientSecret(props.appType, props.authType)) {
    clientObjects.push("secret");
  }
  return clientObjects.length > 0 ? (
    <div>
      <p>
        The last page of the stepper shows a summary of what will be created.
        After you have reviewed the settings you can create the
        application.
      </p>
      <h3>Client information</h3>
      <p>
        Please make sure to safe the <b>client {clientObjects.join(" and ")}</b>{" "}
        for later use in the application.
      </p>
      <img
        alt="client infos"
        src={`/docs/img/guides/application/client-${clientObjects.join("-")}.png`}
        width="700px"
      />
    </div>
  ) : null;
}

export function clientID(appType, authType) {
  return (
    ["pkce", "code", "jwt", "post", "implicit", "basic"].includes(authType) ||
    appType === "native"
  );
}

export function clientSecret(appType, authType) {
  return ["code", "post", "basic"].includes(authType);
}