import { useRef, useState } from "react";
import { useDetailsBackLayer } from "../../app/useBackLayer.js";
import { useI18n } from "../../shared/I18nProvider.jsx";
import { useOutsideDismiss } from "../../shared/hooks/useOutsideDismiss.js";
import { approvalPolicyLabel, closeComposerPermissionMenu, permissionDescription, permissionLabel, requiresFullAccessConfirmation, selectablePermissionProfiles } from "./composer-menus.js";
import { CheckIcon } from "../../shared/ActionIcons.jsx";
import { FullAccessDialog } from "./FullAccessDialog.jsx";

export function ComposerPermissionMenu({ permissions, options, disabled, onOption }) {
  const { t } = useI18n();
  const menuRef = useRef(null);
  const [fullAccessConfirmationOpen, setFullAccessConfirmationOpen] = useState(false);
  useDetailsBackLayer(menuRef, "permission-menu");
  const profiles = selectablePermissionProfiles(permissions);
  const selected = profiles.some((profile) => profile.id === options.permissionProfile) ? options.permissionProfile : profiles[0]?.id || ":workspace";
  const approvalPolicies = ["untrusted", "on-failure", "on-request", "never"];
  const approvalPolicy = approvalPolicies.includes(options.approvalPolicy) ? options.approvalPolicy : "on-request";
  useOutsideDismiss(menuRef, () => { if (menuRef.current?.open) menuRef.current.open = false; });
  const chooseProfile = (id) => {
    closeComposerPermissionMenu(menuRef.current);
    if (requiresFullAccessConfirmation(selected, id)) {
      setFullAccessConfirmationOpen(true);
      return;
    }
    onOption("permissionProfile", id);
  };
  const chooseApprovalPolicy = (policy) => {
    onOption("approvalPolicy", policy);
    closeComposerPermissionMenu(menuRef.current);
  };

  return <><details className={selected === ":danger-full-access" ? "composer-menu full-access" : "composer-menu"} ref={menuRef}>
    <summary className="composer-pill" aria-label={t("composer.permissions")}><span>{permissionLabel(profiles, selected, t)}</span></summary>
    <div className="composer-popover permission-popover compact-menu">
      <div className="popover-title">{t("composer.fileAccess")}</div>
      {profiles.map((profile) => <button type="button" className={`${selected === profile.id ? "menu-option selected" : "menu-option"}${profile.id === ":danger-full-access" ? " full-access" : ""}`} key={profile.id} disabled={disabled} onClick={() => chooseProfile(profile.id)}>
        <span><strong>{permissionLabel(profiles, profile.id, t)}</strong><small>{permissionDescription(profile, t)}</small></span>{selected === profile.id && <CheckIcon />}
      </button>)}
      <div className="menu-divider" />
      <div className="popover-title">{t("composer.approvalMode")}</div>
      {approvalPolicies.map((policy) => <button type="button" className={approvalPolicy === policy ? "menu-option selected" : "menu-option"} key={policy} disabled={disabled} onClick={() => chooseApprovalPolicy(policy)}>
        <span>{approvalPolicyLabel(policy, t)}</span>{approvalPolicy === policy && <CheckIcon />}
      </button>)}
    </div>
  </details><FullAccessDialog open={fullAccessConfirmationOpen} onCancel={() => setFullAccessConfirmationOpen(false)} onConfirm={() => { onOption("permissionProfile", ":danger-full-access"); setFullAccessConfirmationOpen(false); }} /></>;
}
