import { Card, Link, Stack, useContainerSize } from "@front10/base-elements";
import clsx from "clsx";
import * as React from "react";
import { InstagramCardProps } from "./InstagramCard";
import InstagramCardPostTypeCarouselIcon from "./InstagramCardPostTypeCarouselIcon";
import InstagramCardPostTypeVideoIcon from "./InstagramCardPostTypeVideoIcon";
import { InstagramImage } from "./InstagramImage";
import { InstagramReactions } from "./InstagramReactions";
import { InstagramText } from "./InstagramText";

function InstagramH(
  {
    data: {
      image,
      imageAltText = "",
      text1: likesCount,
      text2: commentsCount,
      text3: captionText,
      link,
      type,
      imageFull,
    } = {},
    showText1 = true,
    showText2 = true,
    showText3 = true,
    imageCover = "cover",
    onCardClick,
    onCallToActionClick,
    tabIndex,
    className,
    isLoading,
    ...props
  }: InstagramCardProps,
  ref: React.Ref<HTMLDivElement>
) {
  const cardWidth = useContainerSize(ref as any);
  return (
    <Card
      variant="primary"
      onClick={onCardClick}
      tabIndex={tabIndex}
      {...props}
      ref={ref}
      sx={(theme) => ({
        ...theme.layout?.cardContainer,
        minHeight: "fit-content",
      })}
      className={clsx("wx-card", className)}
    >
      <Stack
        sx={{
          position: "relative",
          height: "auto",
        }}
      >
        <Link
          disabled={onCardClick !== undefined}
          href={link}
          target="_blank"
          sx={{ height: "auto" }}
        >
          {cardWidth > 180 && type === "video" && (
            <InstagramCardPostTypeVideoIcon />
          )}
          {cardWidth > 180 && type === "carousel" && (
            <InstagramCardPostTypeCarouselIcon />
          )}
          <InstagramImage
            alt={imageAltText}
            src={image}
            ratio={4 / 5}
            objectFit={imageCover}
            isLoading={isLoading}
            fullInfo={imageFull}
            imageWidth={cardWidth}
          />
        </Link>
      </Stack>
      {cardWidth > 150 &&
        (isLoading || likesCount || commentsCount || captionText) && (
          <Stack
            p={3}
            gap={3}
            className="fr-card-body wx-card-body"
            alignY="space-between"
          >
            {cardWidth > 150 && showText3 ? (
              <InstagramText lineClamp={2} isLoading={isLoading}>
                {captionText}
              </InstagramText>
            ) : null}
            <InstagramReactions
              align="center"
              size="small"
              likes={likesCount}
              comments={commentsCount}
              link={link}
              isLoading={isLoading}
            />
          </Stack>
        )}
    </Card>
  );
}

const InstagramHWithRef = React.forwardRef(InstagramH);

export { InstagramHWithRef as InstagramH };