import { useTranslation } from "react-i18next";
import { SelectControl } from "@keycloakify/keycloak-admin-ui/ui-shared";
import { FormAccess } from "@keycloakify/keycloak-admin-ui/components/form/FormAccess";
import { useLoginProviders } from "@keycloakify/keycloak-admin-ui/context/server-info/ServerInfoProvider";
import { ClientDescription } from "@keycloakify/keycloak-admin-ui/clients/ClientDescription";
import { getProtocolName } from "@keycloakify/keycloak-admin-ui/clients/utils";

export const GeneralSettings = () => {
  const { t } = useTranslation();
  const providers = useLoginProviders();

  return (
    <FormAccess isHorizontal role="manage-clients">
      <SelectControl
        name="protocol"
        label={t("clientType")}
        labelIcon={t("clientTypeHelp")}
        controller={{
          defaultValue: "",
        }}
        options={providers.map((option) => ({
          key: option,
          value: getProtocolName(t, option),
        }))}
      />
      <ClientDescription hasConfigureAccess />
    </FormAccess>
  );
};