import type RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/roleRepresentation";
import { AlertVariant } from "@patternfly/react-core";
import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import { useAdminClient } from "@keycloakify/keycloak-admin-ui/admin-client";
import { useAlerts } from "@keycloakify/keycloak-admin-ui/ui-shared";
import { AttributeForm } from "@keycloakify/keycloak-admin-ui/components/key-value-form/AttributeForm";
import { RoleForm } from "@keycloakify/keycloak-admin-ui/components/role-form/RoleForm";
import { useRealm } from "@keycloakify/keycloak-admin-ui/context/realm-context/RealmContext";
import { toClient } from "@keycloakify/keycloak-admin-ui/clients/routes/Client";
import { toClientRole } from "@keycloakify/keycloak-admin-ui/clients/routes/ClientRole";
import { NewRoleParams } from "@keycloakify/keycloak-admin-ui/clients/routes/NewRole";

export default function CreateClientRole() {
  const { adminClient } = useAdminClient();

  const { t } = useTranslation();
  const form = useForm<AttributeForm>({ mode: "onChange" });
  const navigate = useNavigate();
  const { clientId } = useParams<NewRoleParams>();
  const { realm } = useRealm();
  const { addAlert, addError } = useAlerts();

  const onSubmit: SubmitHandler<AttributeForm> = async (formValues) => {
    const role: RoleRepresentation = {
      ...formValues,
      name: formValues.name?.trim(),
      attributes: {},
    };

    try {
      await adminClient.clients.createRole({
        id: clientId,
        ...role,
      });

      const createdRole = (await adminClient.clients.findRole({
        id: clientId!,
        roleName: role.name!,
      }))!;

      addAlert(t("roleCreated"), AlertVariant.success);
      navigate(
        toClientRole({
          realm,
          clientId: clientId!,
          id: createdRole.id!,
          tab: "details",
        }),
      );
    } catch (error) {
      addError("roleCreateError", error);
    }
  };

  return (
    <FormProvider {...form}>
      <RoleForm
        form={form}
        onSubmit={onSubmit}
        cancelLink={toClient({
          realm,
          clientId: clientId!,
          tab: "roles",
        })}
        role="manage-clients"
        editMode={false}
      />
    </FormProvider>
  );
}