import React, { useRef, useState } from "react";
import { CTACardProps } from "../../models/components";
import "./CTACard-styles.scss";
import Tag from "../tag/tag";
import Button from "../button/Button";
import { ImagePlaceholder } from "../../assets/images/icons";
import clsx from "clsx";

const CTACard: React.FC<CTACardProps> = ({
  variant = "PRIMARY",
  imageSrc,
  title,
  description,
  tag,
  meta,
  score,
  onClick,
  hoverEffect = true,
  dimmed = false,
  actionButtons,
  showActionButtons,
  scaleDown,
  rtl,
  type,
  lazyLoad = false,
  showImage = true,
}) => {
  const [isHovered, setIsHovered] = useState(false);

  const selectRandomColor = () => {
    const colors = [
      "#98CA3C",
      "#36C6F4",
      "#84459A",
      "#ED1B68",
      "#F26821",
      "#FFCD04",
    ];
    return colors[Math.floor(Math.random() * colors.length)];
  };
  const randomColorRef = useRef(selectRandomColor());

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  const renderImage = () => {
    if (imageSrc) {
      return (
        <img
          className="CTACard-image"
          src={imageSrc}
          alt="Card"
          loading={lazyLoad ? "lazy" : undefined}
          width="130"
          height="130"
        />
      );
    }

    if (variant !== "TERTIARY") {
      return ImagePlaceholder;
    }
  };

  const renderTitle = () => {
    return <div className="CTACard-title">{title}</div>;
  };

  const renderTag = () => {
    return (
      tag && (
        <Tag label={tag} color={randomColorRef.current} textColor="white" />
      )
    );
  };

  const renderType = () => {
    return (
      type && (
        <Tag label={type} color={randomColorRef.current} textColor="white" />
      )
    );
  };

  const renderMeta = () => {
    return meta && <div className="CTACard-meta">{meta}</div>;
  };

  const renderDescription = () => {
    return (
      description && <div className="CTACard-description">{description}</div>
    );
  };

  const renderOverlay = () => {
    return dimmed && <div className="CTACard-root--overlay"></div>;
  };

  const renderActionButtons = () => {
    return (
      actionButtons &&
      actionButtons.length > 0 && (
        <div
          className={`${
            isHovered ? "CTACard-actionButtonsContainer--overlay" : ""
          }`}
        >
          <div
            className={`CTACard-actionButtons ${
              isHovered ? "CTACard-actionButtons--hovered" : ""
            }`}
          >
            {actionButtons.map((button, index) => (
              <Button
                variant={button?.variant ?? undefined}
                key={index}
                disabled={false}
                type="submit"
                text={button?.text}
                onClickHandler={button?.onClickHandler}
                style={button.style ?? {}}
              ></Button>
            ))}

            {isHovered && score && (
              <div
                className={`CTACard-score ${
                  isHovered ? "CTACard-score--hovered" : ""
                }`}
              >
                <div className="CTACard-line"></div>
                <div className="CTACard-score--text">
                  <p>Page Views: {score}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      )
    );
  };

  const handleClick = (event: any) => {
    if (
      event?.target?.className.includes("button-root") ||
      event?.target?.className.includes(
        "CTACard-actionButtonsContainer--overlay"
      )
    ) {
      return;
    }
    onClick && onClick(event);
  };

  return (
    <div
      data-testid="CTACard__component"
      className={clsx(
        "CTACard",
        rtl && "CTACard--rtl",
        showActionButtons && "CTACard-actionButtonContainer--hover",
        dimmed && "CTACard--dimmed"
      )}
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {showActionButtons && renderActionButtons()}
      {variant === "PRIMARY" && (
        <div
          className={`CTACardPrimary-root ${
            scaleDown ? "CTACardPrimary-scaleDown" : ""
          }`}
        >
          <div className="CTACardPrimary-body">
            <div className="CTACardPrimary-tagAndMetaContainer">
              {renderTag()}
              {renderType()}
              {renderMeta()}
            </div>
            <div
              className={`CTACardPrimary-titleContainer ${
                hoverEffect ? "CTACardPrimary-titleContainer--hover" : ""
              }`}
            >
              {renderTitle()}
            </div>
          </div>
          {showImage && (
            <div className="CTACardPrimary-imageContainer">{renderImage()}</div>
          )}
        </div>
      )}

      {variant === "PRIMARY_VERTICAL" && (
        <>
          {renderOverlay()}

          <div className="CTACardPrimaryVertical-root">
            <div className="CTACardPrimaryVertical-imageContainer">
              {renderImage()}
            </div>
            <div className="CTACardPrimaryVertical-tagAndMetaContainer">
              {renderTag()}
              {renderMeta()}
            </div>
            <div className="CTACardPrimaryVertical-titleContainer">
              {renderTitle()}
            </div>
          </div>
        </>
      )}

      {variant === "SECONDARY" && (
        <>
          {renderOverlay()}

          <div className="CTACardSecondary-root">
            {imageSrc ? (
              <div className="CTACardSecondary-imageContainer">
                {renderImage()}
              </div>
            ) : (
              <div className="CTACardSecondary-root--backgroundColor"></div>
            )}
            <div className="CTACardSecondary-title--overlay">
              <span>#</span>
              {renderTitle()}
            </div>
          </div>
        </>
      )}

      {variant === "TERTIARY" && (
        <>
          {renderOverlay()}

          <div className="CTACardTertiary-root">
            <div className="CTACardTertiary-imageContainer">
              {renderImage()}
            </div>
            {renderTitle()}
            {renderDescription()}
          </div>
        </>
      )}
    </div>
  );
};

export default CTACard;