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

interface Props {
  mediaShown: "video" | "gif" | "image";
  imageSrc?: string;
  animationSrc?: string;
  videoSrc?: string;
  alt: string;
  imageCover: SingleCardProps["imageCover"];
  round?: boolean;
  isLoading?: boolean;
}

export function TiktokImage(props: Props) {
  return (
    <Skeleton variant="rectangular" disabled={!props.isLoading}>
      <AspectRatio ratio={9 / 16}>
        {props.mediaShown === "video" ? (
          <video
            src={props.videoSrc}
            playsInline={true}
            loop={true}
            autoPlay={true}
            controls={false}
            muted={true}
            width="100%"
            poster={props.imageSrc}
            aria-label={props.alt}
            sx={{
              objectFit: props.imageCover,
              height: "100%",
            }}
          />
        ) : (
          <picture>
            {props.mediaShown === "gif" ? (
              <source srcSet={props.animationSrc} type="image/webp" />
            ) : null}
            <img
              src={props.imageSrc}
              alt={props.alt}
              className="fr-image wx-card-image"
              sx={(theme) => {
                const borderRadius = get(
                  theme,
                  "layout.cardContainer.borderRadius"
                );
                return {
                  objectFit: props.imageCover,
                  height: "100%",
                  width: "100%",
                  backgroundSize: "cover",
                  backgroundImage: imagePlaceholder,
                  ...((props.round == null || props.round === true) && {
                    borderRadius,
                  }),
                };
              }}
            />
          </picture>
        )}
      </AspectRatio>
    </Skeleton>
  );
}