import React from "react";
import { Button } from "../../button";
import { FloatingImageCardProps } from "./types";

import { DEFAULT_BUTTON_ANIMATION_TYPE } from "@shared/components/animation-wrapper";
import { NextImage } from "@shared/components/next-image";
import { Text } from "@shared/components/text";
import { cx } from "@shared/utils";

const alignmentClasses: Record<string, string> = {
  left: "flex w-full justify-start",
  right: "flex w-full justify-end",
  center: "flex w-full justify-center",
};

export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
  card,
  lgWidth,
  mdWidth,
}) => {
  const {
    image,
    title,
    header,
    body,
    cta,
    ctaAlignment,
    imageLink,
    imageClassName,
    className,
    isPromoBarImg = false,
    shadow = false,
    disableAnimation,
  } = card;

  const ctaAlignmentClass = ctaAlignment
    ? alignmentClasses[ctaAlignment]
    : alignmentClasses.left;
  const imageLinkAvailableClass = imageLink ? "cursor-pointer" : "";

  const handleImageClick = imageLink
    ? () => {
        if (typeof window !== "undefined") {
          window.open(imageLink, "_blank");
        }
      }
    : undefined;

  if (isPromoBarImg) {
    return image?.href ? (
      <NextImage
        src={image.href}
        alt={image.title ?? title ?? "promo-bar-image"}
        width={148}
        height={40}
        onClick={handleImageClick}
        className={imageLinkAvailableClass}
      />
    ) : null;
  }

  return (
    <section
      aria-labelledby="Image Card"
      className={cx(
        "callout-card relative flex h-full w-full flex-col gap-5 px-0 pb-4 pt-0 md:items-start md:gap-6 lg:pb-0",
        shadow && "rounded-3xl shadow-card",
        mdWidth,
        lgWidth,
        className
      )}
    >
      {image?.href ? (
        <div
          className={cx(
            "relative h-[233px] w-full overflow-hidden sm:mb-1 md:h-[274px] md:flex-none lg:h-[330px] lg:mb-0",
            imageClassName
          )}
        >
          <NextImage
            src={image.href}
            alt={image.title ?? title ?? "card-image"}
            width={image.width || 400}
            height={image.height || 330}
            onClick={handleImageClick}
            className={cx(
              "h-full w-full rounded-[40px] object-cover",
              imageLinkAvailableClass
            )}
          />
        </div>
      ) : null}

      {header ? (
        <Text as="h6" className="heading6 text-text">
          {header}
        </Text>
      ) : null}

      {body ? (
        <Text as="div" className="body1 -mt-1 mb-0 flex-1 text-text md:-mt-2 lg:mt-2">
          {body}
        </Text>
      ) : null}

      <div className={cx(ctaAlignmentClass, "mt-auto")}>
        {cta ? (
          <Button
            {...cta}
            showButtonAs={
              cta.showButtonAs || (cta.buttonIconName ? undefined : "text-with-icon")
            }
            iconName={
              cta.iconName || (cta.buttonIconName ? undefined : "expand_circle_right")
            }
            iconFill={cta.iconFill ?? 1}
            // Button animates ONLY when BOTH are explicitly enabled:
            //  - the parent Callout animation is enabled (disableAnimation === false)
            //  - the button's own disableAnimation is enabled (=== false)
            // Any unset/true value on either side -> the button does not animate.
            disableAnimation={
              !(disableAnimation === false && cta.disableAnimation === false)
            }
            // Button always uses the default animation type (pop); it must NOT
            // inherit the card/Callout animationType.
            animationType={DEFAULT_BUTTON_ANIMATION_TYPE}
          />
        ) : null}
      </div>
    </section>
  );
};

export default FloatingImageCard;