/** @jsxRuntime classic */
/** @jsx jsx */
import { AspectRatio, get, jsx, Skeleton } from "@front10/base-elements";
import { InstagramFullImageInfo, InstagramCardProps } from "./InstagramCard";
import { imagePlaceholder } from "../_commons/atoms/placeholder";
import clsx from "clsx";

interface Props {
  alt: string;
  src?: string;
  objectFit: InstagramCardProps["imageCover"];
  ratio?: number;
  variant?: string;
  isLoading?: boolean;
  fullInfo?: InstagramFullImageInfo;
  imageWidth?: number;
}

export function InstagramImage(props: Props) {
  let sourceElement = null;
  if (props.fullInfo && props.imageWidth) {
    const fullInfo: InstagramFullImageInfo = props.fullInfo || {};
    const sources = Object.entries(fullInfo);
    const srcSet = sources
      .map(([_key, info]) => `${info.url} ${info.width}w`)
      .join(", ");
    sourceElement = <source srcSet={srcSet} sizes={`${props.imageWidth}px`} />;
  }

  return (
    <Skeleton variant="rectangular" disabled={!props.isLoading}>
      <AspectRatio ratio={props.ratio}>
        {props.fullInfo == null || (props.fullInfo && props.imageWidth) ? (
          <picture>
            {sourceElement}
            <img
              alt={props.alt}
              src={props.src}
              className={clsx(
                props.variant === "card" ? "fr-image" : "fr-card-image",
                "wx-card-image"
              )}
              decoding="async"
              sx={(theme) => ({
                variant: props.variant,
                objectFit: props.objectFit,
                height: "100%",
                width: "100%",
                ...(props.variant === "card" && {
                  borderRadius: get(theme, "layout.cardContainer.borderRadius"),
                }),
                backgroundSize: "cover",
                backgroundImage: imagePlaceholder,
              })}
            />
          </picture>
        ) : (
          <div />
        )}
      </AspectRatio>
    </Skeleton>
  );
}