import {
  Box,
  Card,
  Inline,
  Link,
  Stack,
  Text,
  useContainerSize,
} from "@front10/base-elements";
import clsx from "clsx";
import { ellipsis } from "polished";
import * as React from "react";
import { SingleCardProps } from "./CardProps";
import { YouTubeVidePreview } from "./_commons/atoms/YoutubeVideoPreview";

function YoutubeB(
  {
    data: {
      image,
      imageAltText = "",
      //likes count
      text1,
      //comment counts
      text2,
      //caption text
      text3,
      link,
      // title
      text5,
      // views count
      text6,
      // created
      text7,
      // video duration,
      text8,
    } = {},
    showText1 = true,
    showText2 = false,
    showText3 = true,
    imageCover = "cover",
    onCardClick,
    onCallToActionClick,
    tabIndex,
    className,
    isLoading,
    ...props
  }: SingleCardProps,
  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",
        "&:hover": {
          ".fr-title-content": {
            textDecoration: "underline",
          },
          ".fr-card-body": {
            opacity: "0.95",
            visibility: "visible",
            transition: "opacity .3s ease",
          },
        },
        color: "var(--wx-card-text-color, #000)",
        ...theme.layout?.cardContainer,
      })}
      className={clsx("wx-card", className)}
    >
      <Box
        sx={{
          position: "relative",
          zIndex: "2",
          opacity: "1",
        }}
      >
        <YouTubeVidePreview
          isLoading={isLoading}
          objectFit={imageCover}
          showPlayIcon={cardWidth > 190}
          showTime={cardWidth > 150}
          alt={imageAltText}
          url={link}
          image={image}
          time={text8}
        />
      </Box>
      {cardWidth > 190 && !isLoading ? (
        <Stack
          className="fr-card-body wx-card-body"
          gap={2}
          p="6px"
          align="start"
          alignY="center"
          sx={{
            position: "absolute",
            opacity: "0",
            top: "0",
            left: "0",
            right: "0",
            bottom: "0",
            borderRadius: "default",
            backgroundColor:
              "var(--wx-card-background-hover, rgba(255,255,255,0.95))",
            transition: "all .3s ease",
            cursor: "pointer",
            backfaceVisibility: "hidden",
            visibility: "hidden",
            zIndex: "3",
          }}
        >
          <Link
            href={link}
            target="_blank"
            className="fr-title-content"
            sx={{
              ...ellipsis(null, 1),
              color: "inherit",
              lineHeight: "1.3",
              fontWeight: "var(--font-weight-bold)",
              fontSize: "14px",
              cursor: "pointer",
              textDecoration: "none",
            }}
          >
            {text5}
          </Link>
          <Text
            sx={{
              fontSize: "12px",
              lineHeight: "1.4",
              fontWeight: "var(--font-weight-light)",
            }}
          >
            {text7}
          </Text>
          {cardWidth > 250 && (
            <Text
              sx={{
                fontSize: "13px",
                lineHeight: "1.4",
                ...ellipsis(null, 2),
              }}
            >
              {text3}
            </Text>
          )}
          <Inline
            gap={1}
            alignY="center"
            divider="•"
            sx={{
              color: "var(--wx-card-text-color, rgba(17, 17, 17, 0.7))",
              fontSize: "12px",
            }}
          >
            <span>{text6} Views</span>
            <span>{text1} Likes</span>
            <span>{text2} Comments</span>
          </Inline>
        </Stack>
      ) : null}
    </Card>
  );
}

const YoutubeBWithRef = React.forwardRef(YoutubeB);

export { YoutubeBWithRef as YoutubeB };