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

import type { ReactNode } from "react";
import { cn } from "@plane/utils";

type TNodedcWorkItemCardProps = {
  isActive: boolean;
  header: ReactNode;
  title: ReactNode;
  footer: ReactNode;
  subtitle?: ReactNode;
  surfaceClassName?: string;
  contentClassName?: string;
  titleClassName?: string;
  titleContainerClassName?: string;
  subtitleClassName?: string;
  footerClassName?: string;
};

export const getNodedcWorkItemCardAppearance = (isActive: boolean) => ({
  surfaceClassName: isActive
    ? "bg-[rgb(var(--nodedc-card-active-rgb))] text-[#111111]"
    : "bg-[rgb(var(--nodedc-card-passive-rgb))] text-white",
  foregroundClasses: isActive ? "text-[#111111]" : "text-white",
  subtleTextClasses: isActive ? "text-[#2F4721]" : "text-[#B3B3B8]",
  pillBackgroundClasses: isActive ? "bg-black/10 text-[#111111]" : "bg-[rgb(var(--nodedc-card-passive-rgb))] text-white",
  iconBubbleClasses: isActive ? "bg-black text-[rgb(var(--nodedc-card-active-rgb))]" : "bg-[#111214] text-white",
});

export const NodedcWorkItemCard = ({
  isActive,
  header,
  title,
  footer,
  subtitle,
  surfaceClassName,
  contentClassName,
  titleClassName,
  titleContainerClassName,
  subtitleClassName,
  footerClassName,
}: TNodedcWorkItemCardProps) => {
  const appearance = getNodedcWorkItemCardAppearance(isActive);

  return (
    <div
      className={cn(
        "rounded-[28px] border-0 p-4 shadow-none outline-none ring-0",
        appearance.surfaceClassName,
        surfaceClassName
      )}
    >
      <div className={cn("relative flex min-h-[220px] flex-col", appearance.foregroundClasses, contentClassName)}>
        <div className="space-y-0.5">
          {header}
          {subtitle && (
            <div className={cn("truncate -mt-0.5 pl-8 text-[11px] font-medium leading-4", appearance.subtleTextClasses, subtitleClassName)}>
              {subtitle}
            </div>
          )}
        </div>

        <div className={cn("flex flex-1 items-center justify-center px-5 py-4 text-center", titleContainerClassName)}>
          <div className={cn("line-clamp-4 max-w-full text-lg font-semibold leading-6", titleClassName)}>{title}</div>
        </div>

        <div className={cn("flex items-center justify-between gap-3", footerClassName)}>{footer}</div>
      </div>
    </div>
  );
};
