import React from "react";
import { Modal, OverflowMenu, OverflowMenuItem, Popover, PopoverContent, } from "@carbon/react";
import styled from "styled-components";
export const ActiveOrgWrapperCustom = styled.div `
	padding: 1.5rem 1rem 15px;
	display: grid;
	grid-auto-flow: column;
	gap: 0.25rem;
`;
export const ActiveOrgWrapper = styled.div `
	padding: 15px 0 0.5rem 1rem;
	width: ${({ $scrollBarWidth }) => `calc(16rem - ${$scrollBarWidth}px)`};
`;
export const ActiveOrgNameWrapper = styled.div `
	display: flex;
	align-items: center;
	justify-content: space-between;
`;
export const ActiveOrgName = styled.div `
	height: 20px; // Set minimum height to allow decenders to be rendered
	line-height: 20px;
	font-size: 14px;
	${({ $isCustomized }) => ($isCustomized ? "" : "width: calc(-2px + 13rem)")};
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
`;
export const ConfirmLeaveModal = ({ isOpen, onConfirm, onCancel, orgName, loadingStatus }) => {
    return (React.createElement(Modal, { danger: true, open: isOpen, modalHeading: "Leave organization", primaryButtonText: "Leave", secondaryButtonText: "Cancel", closeButtonLabel: "Cancel", loadingStatus: loadingStatus, onRequestClose: onCancel, onRequestSubmit: onConfirm, onSecondarySubmit: onCancel, loadingDescription: "Leaving" },
        React.createElement("p", null,
            "Are you sure you want to leave ",
            React.createElement("strong", null, orgName),
            "?"),
        React.createElement("br", null),
        React.createElement("p", null, "Leaving this organization will remove you from all associated teams and projects. To regain access you would need to reach out to the admin/owner of this organization.")));
};
const PopoverWrapper = styled(Popover) `
	max-width: 11rem;

	.cds--popover-content {
		max-width: 176px;
		padding: 0.5rem 1rem;
	}
`;
const StyledOverflowMenu = styled(OverflowMenu) `
	.cds--overflow-menu-options {
		width: 165px;
	}
`;
export const ManageOrgOverflowMenu = ({ canManage, canLeave, isLastOrg, onManage, onRequestToLeave, orgName, }) => {
    const [isPopoverShown, setIsPopoverShown] = React.useState(false);
    const leaveMenuItem = (React.createElement(OverflowMenuItem, { itemText: "Leave organization", disabled: !canLeave, onClick: onRequestToLeave, onMouseOver: () => setIsPopoverShown(true), onMouseLeave: () => setIsPopoverShown(false), "aria-label": `Leave organization - ${orgName}` }));
    const popoverLabel = isLastOrg
        ? "You need to be a member of at least one organization. Join a different organization first if you wish to leave."
        : "Owners cannot leave an organization directly. Assign another user as an owner if you wish to leave.";
    return (React.createElement(StyledOverflowMenu, { size: "sm", flipped: true, "aria-label": "Organization options menu", 
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-expect-error
        align: "top-right", "data-floating-menu-container": "cds--header-panel" },
        canManage && (React.createElement(OverflowMenuItem, { itemText: "Manage organization", onClick: onManage, "aria-label": `Manage organization - ${orgName}` })),
        canLeave ? (leaveMenuItem) : (React.createElement(PopoverWrapper, { open: isPopoverShown, label: popoverLabel, align: "bottom-right" },
            leaveMenuItem,
            React.createElement(PopoverContent, null, popoverLabel)))));
};
