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

function TiktokB(
  {
    data: {
      image,
      imageAltText = "",
      //likes count
      text1,
      //comment counts
      text2,
      //caption text
      text3,
      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"
        className="fr-link"
        sx={{
          height: "auto",
          textDecoration: "none",
          color: "currentColor",
        }}
      >
        <Stack
          sx={{
            position: "relative",
            height: "auto",
          }}
        >
          <Stack
            sx={{
              position: "relative",
              height: "auto",
            }}
          >
            {cardWidth > 180 ? (
              <Box
                className="fr-icon-type-post"
                aria-hidden={mediaShown !== "image"}
                sx={{
                  position: "absolute",
                  opacity: "1",
                  zIndex: "2",
                  top: "0.6em",
                  left: "0.6em",
                  transition: "all 0.3s ease",
                  "&[aria-hidden=true]": {
                    opacity: 0,
                  },
                }}
              >
                <img
                  src="https://res.cloudinary.com/dakp804eh/image/upload/v1603486603/front10-ui/tiktoklogo.png"
                  alt="tiktok logo"
                  width="28px"
                />
              </Box>
            ) : null}
            {cardWidth > 150 ? (
              <Box
                className="fr-toggle-inner"
                sx={{
                  position: "absolute",
                  opacity: "1",
                  zIndex: "2",
                  bottom: "0.6em",
                  left: "0.6em",
                  transition: "all 0.3s ease",
                }}
              >
                <svg
                  className="toggle-inner"
                  width="20"
                  height="20"
                  viewBox="0 0 48 48"
                  fill="#fff"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M12 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>
              </Box>
            ) : null}
            <TiktokImage
              mediaShown={mediaShown}
              imageSrc={image}
              animationSrc={gifUrl}
              videoSrc={videoUrl}
              alt={imageAltText}
              imageCover={imageCover}
              round={false}
              isLoading={isLoading}
            />
          </Stack>
          {cardWidth > 150 ? (
            <Inline
              alignY="center"
              align="center"
              className="fr-card-body wx-card-body"
              sx={{
                padding: 12,
              }}
            >
              <Stack
                gap={2}
                sx={{
                  position: "relative",
                  width: "100%",
                  textAlign: "center",
                }}
              >
                {cardWidth > 175 ? (
                  <Inline gap={2} align="center">
                    {isLoading ? (
                      <Skeleton width="14ch" height="1.5em" />
                    ) : (
                      <React.Fragment>
                        {text1 ? (
                          <Inline gap={2} alignY="center">
                            <Inline
                              align="center"
                              alignY="center"
                              sx={{
                                backgroundColor: "var(--color-gray-100)",
                                padding: "6px",
                                borderRadius: "50%",
                                cursor: "pointer",
                              }}
                            >
                              <svg
                                width="18"
                                height="18"
                                viewBox="0 0 48 48"
                                fill="currentColor"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  fillRule="evenodd"
                                  clipRule="evenodd"
                                  d="M6.66022 8.55074C11.4597 3.71786 19.0168 3.74482 24 9.08441C28.9832 3.74482 36.5403 3.71786 41.3398 8.55074C46.2201 13.465 46.2201 21.4262 41.3398 26.3404L25.3553 42.436C24.9969 42.797 24.509 43 24 43C23.491 43 23.0031 42.797 22.6447 42.436L6.66022 26.3404C1.77993 21.4262 1.77993 13.465 6.66022 8.55074Z"
                                ></path>
                              </svg>
                            </Inline>
                            {showText1 ? (
                              <Text
                                sx={{
                                  fontSize: "13px",
                                  fontWeight: "500",
                                }}
                              >
                                {text1}
                              </Text>
                            ) : null}
                          </Inline>
                        ) : null}
                        {text2 ? (
                          <Inline gap={2} alignY="center">
                            <Inline
                              align="center"
                              alignY="center"
                              sx={{
                                backgroundColor: "var(--color-gray-100)",
                                padding: "6px",
                                borderRadius: "50%",
                                cursor: "pointer",
                              }}
                            >
                              <svg
                                width="18"
                                height="18"
                                viewBox="0 0 48 48"
                                fill="currentColor"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  fillRule="evenodd"
                                  clipRule="evenodd"
                                  d="M4 22C4 12.2852 13.3112 5 24 5C34.6888 5 44 12.2852 44 22C44 27.7044 41.1445 32.4256 37.6906 36.0123C34.2346 39.6013 30.0249 42.2236 26.8944 43.7889C26.2745 44.0988 25.5382 44.0657 24.9485 43.7013C24.3589 43.3369 24 42.6932 24 42V39C13.3112 39 4 31.7148 4 22ZM15.5 25C16.8807 25 18 23.8807 18 22.5C18 21.1193 16.8807 20 15.5 20C14.1193 20 13 21.1193 13 22.5C13 23.8807 14.1193 25 15.5 25ZM24 25C25.3807 25 26.5 23.8807 26.5 22.5C26.5 21.1193 25.3807 20 24 20C22.6193 20 21.5 21.1193 21.5 22.5C21.5 23.8807 22.6193 25 24 25ZM35 22.5C35 23.8807 33.8807 25 32.5 25C31.1193 25 30 23.8807 30 22.5C30 21.1193 31.1193 20 32.5 20C33.8807 20 35 21.1193 35 22.5Z"
                                ></path>
                              </svg>
                            </Inline>
                            {showText2 ? (
                              <Text
                                sx={{
                                  fontSize: "13px",
                                  fontWeight: "500",
                                }}
                              >
                                {text2}
                              </Text>
                            ) : null}
                          </Inline>
                        ) : null}
                      </React.Fragment>
                    )}
                  </Inline>
                ) : null}
                {showText3 ? (
                  isLoading ? (
                    <SkeletonLines lines={3} />
                  ) : (
                    <Text
                      sx={{
                        lineHeight: "1.3",
                        ...ellipsis(null, 4),
                      }}
                    >
                      {text3}
                    </Text>
                  )
                ) : null}
              </Stack>
            </Inline>
          ) : null}
        </Stack>
      </Link>
    </Card>
  );
}

const TiktokBMWithRef = React.forwardRef(TiktokB);

export { TiktokBMWithRef as TiktokB };