import { DomainDirectoryMemberships } from "@metis/assets/client";
import { BrowserLink } from "@metis/core/client";
import type { ResourceDTO } from "@metis/resources/common";
import { DetailPanel } from "@repo/rdx-ui/components/detail-panel";
import { KeyRoundIcon } from "@repo/rdx-ui/lib/icons";
import { useTranslation } from "react-i18next";

import type { CompanyDTO } from "../../../../common";
import { MailboxRelations } from "../../../mailboxes";

export function CompanyResourceRelatedContent({
  company,
  resource,
}: {
  company: CompanyDTO;
  resource: ResourceDTO;
}) {
  const { t } = useTranslation("companies");
  const directory = resource.directory;

  if (directory?.capability === "directory:domain") {
    return (
      <div className="min-w-0 space-y-5">
        <DomainDirectoryMemberships
          companyId={company.id}
          domainId={resource.id}
          key={resource.id}
        />
        <DetailPanel icon={<KeyRoundIcon />} title={t("windowsDomain.accountsAndGroups")}>
          <div className="flex flex-wrap gap-3">
            <BrowserLink
              href={`/companies/${company.id}/access?kind=account&environmentId=${directory.environmentId}`}
            >
              {t("windowsDomain.accounts")}
            </BrowserLink>
            <BrowserLink
              href={`/companies/${company.id}/access?kind=group&environmentId=${directory.environmentId}`}
            >
              {t("windowsDomain.groups")}
            </BrowserLink>
          </div>
        </DetailPanel>
      </div>
    );
  }

  return resource.values.integration?.kind === "mailbox" ? (
    <MailboxRelations company={company} mailboxId={resource.id} />
  ) : null;
}