import React, { useEffect, useMemo } from "react";
import { useProfile } from "../../hooks/useProfile";
import TenantDetails from "./TenantDetails";
import { VIEW_TENANTS } from "../../utils/constants";
import { useNavigate } from "react-router-dom";
import Loader from "../../components/common/Loader";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";

const SelfTenantDetails = () => {
  const { profile, loading } = useProfile();
  const tenantId = profile?.employeeInfo?.tenantId;
  const navigate = useNavigate();
  const isSelfTenantView = useHasUserPermission(VIEW_TENANTS);

  useEffect(() => {
    if (!isSelfTenantView) {
      navigate("/tenants");
    }
  }, [isSelfTenantView, navigate]);

  if (loading || !tenantId) {
    return <Loader/>;
  }

  return (
    <TenantDetails
      tenantId={tenantId}
      wrapInContainer={true}
      showBreadcrumb={true}
      iTSelf={true}
    />
  );
};

export default SelfTenantDetails;