import { Card, Link, Stack, useContainerSize } from "@front10/base-elements";
import clsx from "clsx";
import * as React from "react";
import { InstagramImage } from "../instagram/InstagramImage";
import { InstagramText } from "../instagram/InstagramText";
import { FacebookCardProps } from "./FacebookCard";
import { FacebookHeader } from "./FacebookHeader";

const formatter = new Intl.DateTimeFormat("en", { dateStyle: "medium" });

type Variant = "full" | "image-only" | "text-only";

function FacebookA(
  {
    data: {
      image,
      imageAltText = "",
      link,
      createdAt,
      content,
      user = {},
    } = {},
    imageCover = "cover",
    onCardClick,
    onCallToActionClick,
    tabIndex,
    isLoading,
    className,
    ...props
  }: FacebookCardProps,
  ref: React.Ref<HTMLDivElement>
) {
  const formattedDate = React.useMemo(() => {
    let date = new Date(createdAt ?? "");
    if (date instanceof Date && !isNaN(date as any)) {
      return formatter.format(date);
    }
    return "";
  }, [createdAt]);
  const cardWidth = useContainerSize(ref as any);
  let variant: Variant = "full";
  if (!isLoading) {
    if (!content) {
      variant = "image-only";
    } else if (!image) {
      variant = "text-only";
    }
  }
  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 ? (
        <FacebookHeader
          profilePicture={user.picture}
          profileUrl={`https://www.facebook.com/${user.id || ""}`}
          username={user.name}
          date={formattedDate}
          objectFit={imageCover}
          isLoading={isLoading}
          userVerified={false}
        />
      ) : null}
      {variant === "full" || variant === "image-only" ? (
        <Stack
          sx={{
            position: "relative",
            height: "auto",
          }}
        >
          <Link
            href={link}
            target="_blank"
            disabled={onCardClick !== undefined}
          >
            <InstagramImage
              alt={imageAltText}
              src={image}
              ratio={4 / 5}
              objectFit={imageCover}
              isLoading={isLoading}
              imageWidth={cardWidth}
            />
          </Link>
        </Stack>
      ) : null}
      {(cardWidth > 190 || variant === "text-only") &&
      variant !== "image-only" ? (
        <Stack p={3} gap={3} className="fr-card-body wx-card-body">
          <InstagramText
            lineClamp={variant === "text-only" ? Math.round(cardWidth / 12) : 4}
            isLoading={isLoading}
          >
            {content}
          </InstagramText>
        </Stack>
      ) : null}
    </Card>
  );
}

const FacebookAMWithRef = React.forwardRef(FacebookA);

export { FacebookAMWithRef as FacebookA };