import { Image as DatoImage } from "react-datocms";
import clsx from "clsx";
import { default as NextImage } from "next/image";

import type { FileField } from "@/types";

import styles from "./styles.module.scss";

const formatAsPercent = (x: number) => `${Math.round(x * 100)}%`;

interface ImageProps {
  image?: FileField | null;
  layout?: "fill" | "intrinsic";
  className?: string;
  link?: string | null;
}

export default function Image({
  image,
  layout = "intrinsic",
  className,
  link,
}: ImageProps) {
  if (!image) return null;

  const imageClasses = clsx(styles.image, className, {
    [styles.svg]: image.format === "svg",
  });

  if (image.format === "svg") {
    return (
      <NextImage
        className={imageClasses}
        src={image.url}
        alt={image.alt ?? image.title ?? ""}
        height={image.height ?? undefined}
        width={image.width ?? undefined}
      />
    );
  }

  if (image.responsiveImage) {
    const objectPosition = image.focalPoint
      ? `${formatAsPercent(image.focalPoint.x)} ${formatAsPercent(image.focalPoint.y)}`
      : undefined;

    return link ? (
      <a href={link} target="_blank">
        <DatoImage
          className={imageClasses}
          data={image.responsiveImage}
          layout={layout}
          objectPosition={objectPosition}
          objectFit={layout == "fill" ? "cover" : "contain"}
          style={{
            maxWidth: "100%",
            objectFit: layout == "fill" ? "cover" : "contain",
          }}
        />
      </a>
    ) : (
      <DatoImage
        className={imageClasses}
        data={image.responsiveImage}
        layout={layout}
        objectPosition={objectPosition}
        objectFit={layout == "fill" ? "cover" : "contain"}
        style={{
          maxWidth: "100%",
          objectFit: layout == "fill" ? "cover" : "contain",
        }}
      />
    );
  }

  return null;
}