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

function InstagramB(
  {
    data: {
      image,
      imageAltText = "",
      //likes count
      text1,
      //comment counts
      text2,
      //caption text
      text3,
      link,
      type,
      // profileAvatar
      text6,
      // created
      text7,
      // profileUserName,
      text8,
      imageFull,
      userVerified,
    } = {},
    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)}
    >
      {cardWidth > 150 ? (
        <InstagramHeader
          profilePicture={text6}
          profileUrl={link}
          username={text8}
          date={text7}
          objectFit={imageCover}
          isLoading={isLoading}
          userVerified={userVerified}
          showBrandIcon={cardWidth > 200}
        />
      ) : null}
      <Stack
        sx={{
          position: "relative",
          height: "auto",
        }}
      >
        <Link href={link} target="_blank" disabled={onCardClick !== undefined}>
          {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 || text1 || text2 || text3) && (
        <Stack p={3} gap={3} className="fr-card-body wx-card-body">
          {cardWidth > 190 ? (
            <InstagramReactions
              isLoading={isLoading}
              likes={text1}
              comments={text2}
              link={link}
              showShare={cardWidth > 300}
            />
          ) : null}
          {showText3 ? (
            <InstagramText lineClamp={4} isLoading={isLoading}>
              {text3}
            </InstagramText>
          ) : null}
        </Stack>
      )}
    </Card>
  );
}

const InstagramBWithRef = React.forwardRef(InstagramB);

export { InstagramBWithRef as InstagramB };