/** @jsxRuntime classic */
/** @jsx jsx */
import {
  Box,
  Card,
  jsx,
  Link,
  Stack,
  useContainerSize,
} from "@front10/base-elements";
import * as React from "react";
import { SingleCardProps } from "../CardProps";
import { TiktokImage } from "./TiktokImage";

function TiktokA(
  {
    data: {
      image,
      imageAltText = "",
      text9: gifUrl,
      text10: videoUrl,
      link,
    } = {},
    showText1 = true,
    showText2 = true,
    showText3 = true,
    showText9: showGif,
    showText10: showVideo,
    imageCover = "cover",
    onCardClick,
    onCallToActionClick,
    tabIndex,
    isLoading,
    ...props
  }: SingleCardProps,
  ref: React.Ref<HTMLDivElement>
) {
  const cardWidth = useContainerSize(ref as any);

  let mediaShown: "image" | "video" | "gif" = "image";
  if (showVideo && videoUrl) {
    mediaShown = "video";
  } else if (showGif && gifUrl) {
    mediaShown = "gif";
  }

  return (
    <Card
      variant="primary"
      onClick={onCardClick}
      tabIndex={tabIndex}
      {...props}
      ref={ref}
      sx={(theme) => ({
        position: "relative",
        width: "100%",
        ...theme.layout?.cardContainer,
        minHeight: "fit-content",
        willChange: "transform",
      })}
      className="wx-card"
    >
      <Link
        href={link}
        target="_blank"
        sx={{
          height: "auto",
        }}
      >
        <Stack
          sx={{
            position: "relative",
            height: "auto",
          }}
        >
          {cardWidth > 180 ? (
            <Box
              className="fr-icon-type-post"
              sx={{
                position: "absolute",
                opacity: "1",
                zIndex: "2",
                top: "0.6em",
                right: "0.6em",
                transition: "transform opacity 0.3s ease",
              }}
            >
              <img
                src="https://res.cloudinary.com/dakp804eh/image/upload/v1603486603/front10-ui/tiktoklogo.png"
                alt="tiktok logo"
                width="28px"
              />
            </Box>
          ) : null}
          <TiktokImage
            mediaShown={mediaShown}
            imageSrc={image}
            animationSrc={gifUrl}
            videoSrc={videoUrl}
            alt={imageAltText}
            imageCover={imageCover}
            isLoading={isLoading}
          />
        </Stack>
      </Link>
    </Card>
  );
}

const TiktokAMWithRef = React.forwardRef(TiktokA);

export { TiktokAMWithRef as TiktokA };