// @ts-check

import getAttributesString from "./getAttributesString.js";

export default function getImgElement({
  src,
  alt,
  sizes,
  style,
  srcset,
  loading,
  decoding,
  imagesizes,
  fadeInTransition,
  layoutStyles,
  imgAttributes,
  imgClassName = "",
}) {
  const {
    class: customClasses = "",
    style: customInlineStyles = "",
    onload: customOnload = "",
    ...restImgAttributes
  } = imgAttributes;

  const attributesString = getAttributesString({
    attributes: restImgAttributes,
    element: "img",
    excludeArray: [
      "src",
      "alt",
      "srcset",
      "sizes",
      "width",
      "height",
      "loading",
      "decoding",
    ],
  });

  const classAttribute = ["astro-imagetools-img", imgClassName, customClasses]
    .join(" ")
    .trim();

  const styleAttribute = [
    "display: inline-block; overflow: hidden; vertical-align: middle;",
    customInlineStyles + (customInlineStyles.endsWith(";") ? "" : ";"),
    layoutStyles,
  ]
    .join(" ")
    .trim();

  const onloadAttribute = [
    !imgClassName && style
      ? fadeInTransition
        ? `parentElement.style.setProperty('--z-index', 1); parentElement.style.setProperty('--opacity', 0);`
        : `parentElement.style.backgroundImage = 'unset';`
      : "",
    customOnload,
  ]
    .join(" ")
    .trim();

  const imgElement = `<img
    ${attributesString}
    src="${src}"
    ${typeof alt === "string" ? `alt="${alt}"` : ""}
    srcset="${srcset}"
    sizes="${imagesizes}"
    width="${sizes.width}"
    height="${sizes.height}"
    ${loading ? `loading="${loading}"` : ""}
    ${decoding ? `decoding="${decoding}"` : ""}
    class="${classAttribute}"
    style="${styleAttribute}"
    onload="${onloadAttribute}"
  />`;

  return imgElement;
}