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

export interface Props extends InstagramCardProps {
  hoverBgColor?: string;
  breakpoint?: number;
}

function InstagramSquare(
  {
    data: {
      image,
      imageAltText = "",
      text1: likesCount,
      text2: commentsCount,
      text3: captionText,
      link,
      type,
      imageFull,
    } = {},
    showText1 = true,
    showText2 = true,
    imageCover = "cover",
    onCardClick,
    onCallToActionClick,
    tabIndex,
    className,
    isLoading,
    hoverBgColor = "rgba(0,0,0,0.8)",
    children,
    breakpoint = 300,
    ...props
  }: Props,
  ref: React.Ref<HTMLDivElement>
) {
  const cardWidth = useContainerSize(ref as any);
  return (
    <Card
      variant="primary"
      onClick={onCardClick}
      tabIndex={tabIndex}
      {...props}
      ref={ref}
      sx={(theme) => ({
        position: "relative",
        width: "100%",
        ...theme.layout?.cardContainer,
        minHeight: "fit-content",
        "&:hover": {
          ".fr-card-body": {
            opacity: "1",
            visibility: "visible",
            pointerEvents: "all",
          },
          ".fr-icon-type-post": {
            opacity: "0",
          },
          "@media (hover: none) and (pointer: coarse)": {
            ".fr-card-body": {
              display: "none",
            },
          },
        },
      })}
      className={clsx("wx-card", className)}
    >
      <Link
        href={link}
        target="_blank"
        sx={{
          height: "auto",
        }}
        disabled={onCardClick !== undefined}
      >
        <Stack
          sx={{
            position: "relative",
            height: "auto",
          }}
        >
          {cardWidth > 180 && type === "video" && (
            <InstagramCardPostTypeVideoIcon />
          )}
          {cardWidth > 180 && type === "carousel" && (
            <InstagramCardPostTypeCarouselIcon />
          )}
          <InstagramImage
            alt={imageAltText}
            ratio={1}
            src={image}
            objectFit={imageCover}
            variant="card"
            isLoading={isLoading}
            fullInfo={imageFull}
            imageWidth={cardWidth}
          />
          {children &&
            cardWidth > breakpoint &&
            (likesCount || commentsCount || captionText) && (
              <Box
                className="fr-card-body wx-card-body"
                sx={{
                  ...cover("-1px"),
                  zIndex: "2",
                  opacity: "0",
                  visibility: "hidden",
                  pointerEvents: "none",
                  transition: "opacity 0.3s, visibility 0.3s",
                  textAlign: "center",
                  color: "var(--wx-card-text-color, #fff)",
                  background: `var(--wx-card-background-hover, ${hoverBgColor})`,
                  display: "flex",
                  alignItems: "center",
                }}
              >
                {children}
              </Box>
            )}
        </Stack>
      </Link>
    </Card>
  );
}

const InstagramSquareWithRef = React.forwardRef(InstagramSquare);

export { InstagramSquareWithRef as InstagramSquare };