/**
 * 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 type { TContextMenuItem } from "@plane/ui";
import { ActionDropdown } 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();

  const items: TContextMenuItem[] = [
    {
      key: "accept",
      action: () => onAccept?.(),
      shouldRender: includeDecisionActions && canReviewClosedRequest && !!onAccept,
      customContent: (
        <div className="flex items-center gap-2 text-success-secondary">
          <CheckCircleFilledIcon width={14} height={14} />
          {t("external_contours_page.actions.accept")}
        </div>
      ),
    },
    {
      key: "decline",
      action: () => onDecline?.(),
      shouldRender: includeDecisionActions && canReviewClosedRequest && !!onDecline,
      customContent: (
        <div className="flex items-center gap-2 text-danger-secondary">
          <CloseCircleFilledIcon width={14} height={14} />
          {t("external_contours_page.actions.decline")}
        </div>
      ),
    },
    {
      key: "copy",
      action: onCopy,
      customContent: (
        <div className="flex items-center gap-2">
          <CopyLinkIcon width={14} height={14} />
          {t("external_contours_page.actions.copy")}
        </div>
      ),
    },
    {
      key: "open",
      action: () => onOpenTarget?.(),
      shouldRender: canOpenTargetWorkItem && !!onOpenTarget,
      customContent: (
        <div className="flex items-center gap-2">
          <NewTabIcon width={14} height={14} />
          {t("external_contours_page.actions.open")}
        </div>
      ),
    },
    {
      key: "toggle-subscription",
      action: () => onToggleSubscription?.(),
      shouldRender: canOpenTargetWorkItem && !!onToggleSubscription,
      disabled: isSubscriptionLoading || isSubscribed === undefined,
      customContent: (
        <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>
      ),
    },
  ];

  return (
    <ActionDropdown
      items={items}
      button={<MoreHorizontal className="size-4" />}
      buttonClassName={getIconButtonStyling("secondary", "lg")}
      placement="bottom-start"
    />
  );
};