import { Tab, TabTitleText } from "@patternfly/react-core";

import { useTranslation } from "react-i18next";
import {
  RoutableTabs,
  useRoutableTab,
} from "@keycloakify/keycloak-admin-ui/components/routable-tabs/RoutableTabs";
import { useRealm } from "@keycloakify/keycloak-admin-ui/context/realm-context/RealmContext";
import {
  toUserProfile,
  UserProfileTab as IUserProfileTab,
} from "@keycloakify/keycloak-admin-ui/realm-settings/routes/UserProfile";
import { AttributesGroupTab } from "@keycloakify/keycloak-admin-ui/realm-settings/user-profile/AttributesGroupTab";
import { AttributesTab } from "@keycloakify/keycloak-admin-ui/realm-settings/user-profile/AttributesTab";
import { JsonEditorTab } from "@keycloakify/keycloak-admin-ui/realm-settings/user-profile/JsonEditorTab";
import { UserProfileProvider } from "@keycloakify/keycloak-admin-ui/realm-settings/user-profile/UserProfileContext";

type UserProfileTabProps = {
  setTableData: React.Dispatch<
    React.SetStateAction<Record<string, string>[] | undefined>
  >;
};

export const UserProfileTab = ({ setTableData }: UserProfileTabProps) => {
  const { realm } = useRealm();
  const { t } = useTranslation();

  const useTab = (tab: IUserProfileTab) =>
    useRoutableTab(toUserProfile({ realm, tab }));

  const attributesTab = useTab("attributes");
  const attributesGroupTab = useTab("attributes-group");
  const jsonEditorTab = useTab("json-editor");

  return (
    <UserProfileProvider>
      <RoutableTabs
        defaultLocation={toUserProfile({ realm, tab: "attributes" })}
        mountOnEnter
      >
        <Tab
          title={<TabTitleText>{t("attributes")}</TabTitleText>}
          data-testid="attributesTab"
          {...attributesTab}
        >
          <AttributesTab setTableData={setTableData} />
        </Tab>
        <Tab
          title={<TabTitleText>{t("attributesGroup")}</TabTitleText>}
          data-testid="attributesGroupTab"
          {...attributesGroupTab}
        >
          <AttributesGroupTab setTableData={setTableData} />
        </Tab>
        <Tab
          title={<TabTitleText>{t("jsonEditor")}</TabTitleText>}
          data-testid="jsonEditorTab"
          {...jsonEditorTab}
        >
          <JsonEditorTab />
        </Tab>
      </RoutableTabs>
    </UserProfileProvider>
  );
};