// Generated with util/create-component.js
import React from "react";
import NsImage from "../../shared/ns-image";
import Text from "../../UI/Text";
import ContentsEditorDivider from "../Divider";
import { ImageProps } from "./Image.types";

const Image: React.FC<ImageProps> = ({
  url,
  ImageWrapper,
  title,
  description,
  text,
  alt,
  link,
  routeToNewPage,
  style,
  isMobile = true,
}) => {
  return (
    <div
      data-testid="ContentsEditorImage"
      className={`nrc--ContentsEditorImage px-[2rem] py-[1.2rem] ${
        isMobile ? "w-full" : "w-[50rem] mx-auto"
      }`}
      style={style}
    >
      {link ? (
        <a href={link} target={routeToNewPage ? "_blank" : ""} rel="noreferrer">
          <ImageContent
            url={url}
            ImageWrapper={ImageWrapper}
            alt={alt}
            title={title}
            description={description}
            text={text}
            isMobile={isMobile}
          />
        </a>
      ) : (
        <ImageContent
          url={url}
          ImageWrapper={ImageWrapper}
          alt={alt}
          title={title}
          description={description}
          text={text}
          isMobile={isMobile}
        />
      )}
    </div>
  );
};

const ImageContent = ({
  url,
  ImageWrapper,
  alt,
  title,
  description,
  text,
  isMobile,
}: {
  url: string;
  ImageWrapper?: JSX.Element;
  alt: string;
  title: string;
  description: string;
  text: string;
  isMobile: boolean;
}) => {
  const dimHeight = (text?.split("\n").length + 1) * ((isMobile ? 3 : 4) * 1.5);

  return (
    <div className="">
      {title && (
        <Text type="B5" className="mb-[0.6rem] text-center text-gray-10">
          {title}
        </Text>
      )}

      <div className="relative w-full h-auto">
        <NsImage
          ImageWrapper={ImageWrapper}
          imageUrl={url}
          alt={alt}
          className="w-full h-auto"
        />

        {text && (
          <>
            <div
              className="absolute bottom-0 w-full bg-gradient-to-t from-black p-[1.6rem] opacity-[0.5]"
              style={{ height: `${dimHeight}rem` }}
            />

            <p
              className={`absolute bottom-0 w-full whitespace-pre-wrap break-keep p-[1.6rem] text-center font-extrabold leading-[150%] text-white ${
                isMobile ? "text-heading-3" : "text-heading-1"
              }`}
            >
              {text}
            </p>
          </>
        )}
      </div>

      {description && (
        <div className="mt-[0.6rem] w-full">
          <ContentsEditorDivider color="#EFEFEF" height={1} />
          <Text
            type="B9"
            className="mt-[0.6rem] whitespace-pre-wrap text-center text-gray-7"
          >
            {description}
          </Text>
        </div>
      )}
    </div>
  );
};

export default Image;