import React, { 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";

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

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

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

  function isArabic(text: any) {
    let pattern = /[\u0600-\u06FF\u0750-\u077F]/;
    return pattern.test(text);
  }

  const renderImage = () => {
    if (imageSrc) {
      return <img className="CTACard-image" src={imageSrc} alt="Card" />;
    }

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

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

  const renderTag = () => {
    return tag && <Tag label={tag} color="#36C6F4" textColor="white" />;
  };

  const renderType = () => {
    return type && <Tag label={type} color="#36C6F4" 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>Score: {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={`CTACard ${
        isArabic(title) ? "CTACard--arabic" : "CTACard--english"
      } ${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>
          <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">
              {renderTitle()}
            </div>
          </div>
        </>
      )}

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

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

export default CTACard;