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

import { Checklist } from "@shared/components/checklist";
import { Image } from "@shared/components/image";
import { Link } from "@shared/components/link";
import { NextImage } from "@shared/components/next-image";
import { Text } from "@shared/components/text";
import { VideoLink } from "@shared/components/video-link";
import { cx } from "@shared/utils";

export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
  brow,
  enableHeading,
  title,
  subTitle,
  ctaDisclaimer,
  disclaimer,
  description,
  image,
  imageLinks,
  mediaPosition = true,
  checklist,
  secondaryCta,
  cta,
  videoLink,
  maxWidth = true,
  color = "light",
  imageWidth = 660,
  imageHeight = 660,
  useOriginalImageAspectRatio = false,
  isAboveTheFold = false,
  onModalButtonClick,
  onClick,
  renderCheckPlans,
  enableAnimation = false,
}) => {
  const hasVideoLink = Boolean(videoLink);

  return (
    <div className="component-container shared-component-ipb pb-16 pt-16">
      <div
        className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} px-5 pb-8 pt-8 md:px-10`}
      >
        <div
          className={`flex shrink-0 flex-col items-center gap-8 xl:items-stretch xl:gap-10 xl:gap-[126px] ${mediaPosition ? "xl:flex-row-reverse" : "xl:flex-row"}`}
        >
          <div
            className={`flex flex-[1_0_0] flex-col items-start justify-center gap-8 xl:gap-10 ${color == "dark" ? "text-text" : "text-white"}`}
          >
            <div className="heading holder">
              {brow && (
                <Text
                  as="div"
                  className="subheading4 mb-4 text-text-brand xl:subheading2 xl:mb-3"
                >
                  {brow}
                </Text>
              )}
              {title && (
                <Text
                  as={enableHeading ? "h1" : "h2"}
                  className="heading2 xl:heading1"
                >
                  {title}
                </Text>
              )}
              {subTitle && (
                <Text
                  as={enableHeading ? "h2" : "h3"}
                  className="subheading3 mt-3 md:subheading1"
                >
                  {subTitle}
                </Text>
              )}
            </div>
            {/* Content Section */}
            {description && (
              <Text as="div" className="body1">
                {description}
              </Text>
            )}
            {/* Checklist Rendering */}
            {checklist.length > 0 && (
              <Checklist
                items={checklist}
                iconPosition="top"
                iconSize={24}
                listItemClassName="body1 text-text"
                listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
              />
            )}
            {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
            {imageLinks.length > 0 && (
              <div className="flex gap-4">
                {/* Image Links Collection */}
                {imageLinks?.map(
                  (link: { url: string; image: string }, index: number) => (
                    <div key={index} className="image-link w-[147px]">
                      <Link
                        variant="unstyled"
                        href={link.url}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <Image src={link.image} alt="icon-link" />
                      </Link>
                    </div>
                  )
                )}
              </div>
            )}
            {/* CTAs and Disclaimers */}
            {(cta || secondaryCta) && (
              <div className="flex w-full flex-col gap-4 xl:flex-row">
                {cta && (
                  <div className="primary-cta w-full xl:w-auto xl:shrink-0">
                    <Button
                      {...cta}
                      // Block-level `enableAnimation` takes precedence:
                      //  - true  -> CTA animates
                      //  - false -> CTA animation disabled
                      //  - undefined -> fall back to the CTA's own setting
                      disableAnimation={
                        enableAnimation === undefined
                          ? cta.disableAnimation
                          : !enableAnimation
                      }
                      fullWidth={true}
                      size={{ base: "large" }}
                      renderCheckPlans={renderCheckPlans}
                      onModalButtonClick={onModalButtonClick}
                      onClick={(e: React.MouseEvent) => onClick?.(e, "primary")}
                    />
                  </div>
                )}
                {secondaryCta && (
                  <div className="secondary-cta w-full xl:w-auto xl:shrink-0">
                    <Button
                      {...secondaryCta}
                      // Block-level `enableAnimation` takes precedence:
                      //  - true  -> CTA animates
                      //  - false -> CTA animation disabled
                      //  - undefined -> fall back to the CTA's own setting
                      disableAnimation={
                        enableAnimation === undefined
                          ? secondaryCta.disableAnimation
                          : !enableAnimation
                      }
                      fullWidth={true}
                      size={{ base: "large" }}
                      renderCheckPlans={renderCheckPlans}
                      buttonClassName="px-3 min-w-[260px]"
                      onModalButtonClick={onModalButtonClick}
                      onClick={(e: React.MouseEvent) =>
                        onClick?.(e, "secondary")
                      }
                    />
                  </div>
                )}
              </div>
            )}
          </div>
          <aside className="flex w-full flex-1 shrink-0 items-center justify-center lg:w-auto">
            {/* Media Section: only when no Video Link is attached at all */}
            {image && !hasVideoLink && (
              <div
                className={cx(
                  !useOriginalImageAspectRatio
                    ? "relative aspect-[16/9] w-full overflow-hidden rounded-image lg:h-[486px] xl:aspect-square xl:max-h-[486px] xl:w-[486px]"
                    : "overflow-hidden rounded-image"
                )}
              >
                <NextImage
                  src={image}
                  alt="section-image"
                  priority={isAboveTheFold}
                  fill={!useOriginalImageAspectRatio}
                  width={
                    !useOriginalImageAspectRatio ? undefined : imageWidth || 660
                  }
                  height={
                    !useOriginalImageAspectRatio
                      ? undefined
                      : imageHeight || 660
                  }
                  sizes="(max-width: 430px) 100vw, (max-width: 834px) 100vw, 50vw"
                  className={cx(
                    !useOriginalImageAspectRatio ? "object-cover" : "w-full"
                  )}
                />
              </div>
            )}
            {/* Video Link Section */}
            <VideoLink
              videoLink={videoLink}
              imageWidth={imageWidth}
              imageHeight={imageHeight}
              useOriginalImageAspectRatio={useOriginalImageAspectRatio}
              isAboveTheFold={isAboveTheFold}
            />
          </aside>
        </div>
      </div>

      {disclaimer && (
        <div className="mt-10 flex justify-center xl:mt-18">
          <div>{disclaimer}</div>
        </div>
      )}
    </div>
  );
};

export default ImagePromoBar;