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 { InstagramHeader } from "./InstagramHeader";
import { InstagramImage } from "./InstagramImage";
import { InstagramText } from "./InstagramText";

function InstagramI(
  {
    data: {
      image,
      imageAltText = "",
      text3: captionText,
      link,
      type,
      text6: profileAvatar,
      text7: createdAt,
      text8: profileUserName,
      userVerified,
      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 ? (
        <Stack p={3} gap={3} className="fr-card-body wx-card-body">
          <InstagramHeader
            variant="block"
            profilePicture={profileAvatar}
            profileUrl={link}
            username={profileUserName}
            date={createdAt}
            objectFit={imageCover}
            isLoading={isLoading}
            userVerified={userVerified}
            sx={{ marginTop: "-32px" }}
          />
          {showText3 ? (
            <InstagramText lineClamp={4} isLoading={isLoading}>
              {captionText}
            </InstagramText>
          ) : null}
        </Stack>
      ) : null}
    </Card>
  );
}

const InstagramIWithRef = React.forwardRef(InstagramI);

export { InstagramIWithRef as InstagramI };