/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { MoreHorizontal, Bell, BellOff } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { getIconButtonStyling } from "@plane/propel/icon-button";
import { CheckCircleFilledIcon, CloseCircleFilledIcon, CopyLinkIcon, NewTabIcon } from "@plane/propel/icons";
import { CustomMenu } from "@plane/ui";

type Props = {
  canOpenTargetWorkItem: boolean;
  canReviewClosedRequest: boolean;
  includeDecisionActions?: boolean;
  isSubscribed?: boolean;
  isSubscriptionLoading?: boolean;
  onAccept?: () => void;
  onCopy: () => void;
  onDecline?: () => void;
  onOpenTarget?: () => void;
  onToggleSubscription?: () => void;
};

export const ExternalContourActionsMenu = (props: Props) => {
  const {
    canOpenTargetWorkItem,
    canReviewClosedRequest,
    includeDecisionActions = false,
    isSubscribed,
    isSubscriptionLoading = false,
    onAccept,
    onCopy,
    onDecline,
    onOpenTarget,
    onToggleSubscription,
  } = props;
  const { t } = useTranslation();

  return (
    <CustomMenu
      customButton={<MoreHorizontal className="size-4" />}
      customButtonClassName={getIconButtonStyling("secondary", "lg")}
      placement="bottom-start"
    >
      {includeDecisionActions && canReviewClosedRequest && onAccept && (
        <CustomMenu.MenuItem onClick={onAccept}>
          <div className="flex items-center gap-2 text-success-secondary">
            <CheckCircleFilledIcon width={14} height={14} />
            {t("external_contours_page.actions.accept")}
          </div>
        </CustomMenu.MenuItem>
      )}

      {includeDecisionActions && canReviewClosedRequest && onDecline && (
        <CustomMenu.MenuItem onClick={onDecline}>
          <div className="flex items-center gap-2 text-danger-secondary">
            <CloseCircleFilledIcon width={14} height={14} />
            {t("external_contours_page.actions.decline")}
          </div>
        </CustomMenu.MenuItem>
      )}

      <CustomMenu.MenuItem onClick={onCopy}>
        <div className="flex items-center gap-2">
          <CopyLinkIcon width={14} height={14} />
          {t("external_contours_page.actions.copy")}
        </div>
      </CustomMenu.MenuItem>

      {canOpenTargetWorkItem && onOpenTarget && (
        <CustomMenu.MenuItem onClick={onOpenTarget}>
          <div className="flex items-center gap-2">
            <NewTabIcon width={14} height={14} />
            {t("external_contours_page.actions.open")}
          </div>
        </CustomMenu.MenuItem>
      )}

      {canOpenTargetWorkItem && onToggleSubscription && (
        <CustomMenu.MenuItem onClick={onToggleSubscription} disabled={isSubscriptionLoading || isSubscribed === undefined}>
          <div className="flex items-center gap-2">
            {isSubscribed ? <BellOff width={14} height={14} /> : <Bell width={14} height={14} />}
            {isSubscribed ? t("common.actions.unsubscribe") : t("common.actions.subscribe")}
          </div>
        </CustomMenu.MenuItem>
      )}
    </CustomMenu>
  );
};