import React from "react";
import { useTranslation } from "react-i18next";
import HorizontalTabs from "../../../components/common/HorizionalTabs";
import Tab from "../../../components/common/Tab";
import authentication from "../../frame/services/authenticationService";
import GeneralTab from "./components/GeneralTab";
import MailTemplatesTab from "./components/MailTemplatesTab";
import SecurityRolesTab from "./components/SecurityRolesTab";

interface DomainsDetailsProps {
  editMode: boolean;
}

const DomainsDetails: React.FC<DomainsDetailsProps> = ({ editMode }) => {
  const { t } = useTranslation();

  const canViewMailTemplates = authentication.hasAccess("ViewDomain");
  const canViewSecurityRoles = authentication.hasAccess("ViewRole");

  const heading = editMode ? t("EditDomain") : t("AddDomain");

  const tabs: JSX.Element[] = [];

  tabs.push(
    <Tab key={1} label={t("General")}>
      <GeneralTab isEditMode={editMode} />
    </Tab>,
  );

  if (editMode) {
    if (canViewMailTemplates) {
      tabs.push(
        <Tab key={2} label={t("MailTemplates")}>
          <MailTemplatesTab />
        </Tab>,
      );
    }
    if (canViewSecurityRoles) {
      tabs.push(
        <Tab key={3} label={t("SecurityRoles")}>
          <SecurityRolesTab />
        </Tab>,
      );
    }
  }

  return (
    <div>
      <h1>{heading}</h1>
      <HorizontalTabs>{tabs}</HorizontalTabs>
    </div>
  );
};
export default DomainsDetails;