import {
  Carousel,
  CarouselProps,
  useContainerSize,
  Box,
} from "@front10/base-elements";
import React from "react";
import { InstagramImage } from "./InstagramImage";

function InstagramN(
  {
    showCloseButton: _showCloseButton = false,
    data: { media = [], ...otherData } = {},
    showText8: showProfileName = false,
    showText7: showCreatedAt = false,
    showText3: showCaption = false,
    showText2: showCommentsCount = false,
    showText1: showLikes = false,
    imageCover = "cover",
    customCss = {},
    showDots = true,
    draggable = false,
    ...props
  }: CardProps & CarouselProps,
  ref: React.Ref<HTMLDivElement>
) {
  const cardWidth = useContainerSize(ref as any);
  //const vHeight = window.innerHeight;

  return (
    <Box ref={ref} sx={{ height: "100% !important" }}>
      <Carousel
        elementsToShow={1}
        controlsLayout="basic"
        showDots={showDots}
        controlsOffset={0}
        initialSlide={props.initialSlide}
        gap="0"
        unstable_noPaddingBottom={true}
        draggable={draggable}
        cardCarousel={true}
      >
        {media?.map((item: any, index: number) => (
          <>
            <InstagramImage
              key={index}
              alt={otherData.imageAltText}
              src={item.image}
              ratio={1}
              objectFit={imageCover}
              isLoading={props.isLoading}
              fullInfo={otherData.imageFull}
              imageWidth={cardWidth}
            />
          </>
        ))}
      </Carousel>
    </Box>
  );
}

const InstagramNWithRef = React.forwardRef(InstagramN);

export { InstagramNWithRef as InstagramN };