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

function TiktokC(
  {
    data: {
      image,
      imageAltText = "",
      text9: gifUrl,
      text10: videoUrl,
      //video count
      text11,
      link,
    } = {},
    showText11 = 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",
          }}
        >
          <TiktokImage
            mediaShown={mediaShown}
            imageSrc={image}
            animationSrc={gifUrl}
            videoSrc={videoUrl}
            alt={imageAltText}
            imageCover={imageCover}
            isLoading={isLoading}
          />
          {cardWidth > 150 ? (
            <Inline
              className="fr-toggle-inner"
              gap={2}
              alignY="center"
              sx={{
                position: "absolute",
                opacity: "1",
                zIndex: "2",
                bottom: "0.6em",
                left: "0.6em",
                transition: "all 0.3s ease",
              }}
            >
              <svg
                className="like-icon"
                width="18"
                height="18"
                viewBox="0 0 48 48"
                fill="#fff"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M16 10.554V37.4459L38.1463 24L16 10.554ZM12 8.77702C12 6.43812 14.5577 4.99881 16.5569 6.21266L41.6301 21.4356C43.5542 22.6038 43.5542 25.3962 41.6301 26.5644L16.5569 41.7873C14.5577 43.0012 12 41.5619 12 39.223V8.77702Z"
                ></path>
              </svg>
              <Text
                sx={{
                  fontSize: "16px",
                  fontWeight: "var(--font-weight-bold)",
                  color: "#fff",
                }}
              >
                {text11}
              </Text>
            </Inline>
          ) : null}
        </Stack>
      </Link>
    </Card>
  );
}

const TiktokCMWithRef = React.forwardRef(TiktokC);

export { TiktokCMWithRef as TiktokC };