/** @jsxRuntime classic */
/** @jsx jsx */
import { Box, jsx, useContainerSize } from "@front10/base-elements";
import * as React from "react";
import { ImageData } from "../CardProps";
import { imagePlaceholder } from "../_commons/atoms/placeholder";
import { openLightbox } from "@front10/utils";

interface Props {
  images: ImageData[];
}

export interface ImageProps extends ImageData {
  width: number;
  height: number;
  placeholder?: boolean;
  onClick?: () => void;
}

export function TwitterImage({
  image,
  width,
  altText,
  height,
  placeholder = true,
  onClick,
}: ImageProps) {
  if (width === 0) {
    return null;
  }
  let url = image;
  const isFromTwitterCDN = url.includes("pbs.twimg.com");
  if (isFromTwitterCDN) {
    url = url.replace("http://", "https://");
  }
  const webpUrl = `${url}?format=webp`;
  return (
    <picture>
      <source
        type="image/webp"
        srcSet={`${webpUrl}&name=small 500w, ${webpUrl}&name=360x360 360w, ${webpUrl}&name=thumb 150w`}
        sizes={`${width}px`}
      />
      <img
        src={`${url}?name=small`}
        alt={altText ?? "Image"}
        width={width}
        height={height}
        decoding="async"
        onClick={onClick}
        sx={{
          borderRadius: "default",
          width: "100%",
          height: "100%",
          overflow: "hidden",
          objectFit: "cover",
          maxHeight: height,
          backgroundSize: "cover",
          ...(placeholder
            ? { backgroundImage: imagePlaceholder }
            : { backgroundColor: "#000" }),
        }}
      />
    </picture>
  );
}

export function TwitterImages(props: Props) {
  const ref = React.useRef(null);
  const width = useContainerSize(ref);
  // Twitter recommends a 16:9 aspect ratio for tweet images
  const height = width * 0.5625;
  const count = props.images.length;
  const cols = count > 1 ? 2 : 1;
  const gap = width <= 768 ? 2 : 4;
  const cardHeight = count > 2 ? height / 2 - gap : height;

  return (
    <Box
      ref={ref}
      sx={{
        display: "grid",
        gridTemplateColumns: `repeat(${cols}, 1fr)`,
        gap: `${gap}px`,
        height,
        ...(count === 3 && { "&>:first-child": { gridRow: "1 / span 2" } }),
      }}
    >
      {props.images.map((image, index) => {
        return (
          <TwitterImage
            key={image.image}
            image={image.image}
            altText={image.altText}
            width={width}
            height={count === 3 && index === 0 ? height : cardHeight}
            onClick={() => openLightbox(index, props.images, "twitter")}
          />
        );
      })}
    </Box>
  );
}