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

function YoutubeA(
  {
    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) => ({
        "&:hover": {
          ".fr-youtube-svg": {
            opacity: 1,
          },
          ".fr-title-content": {
            textDecoration: "underline",
          },
        },
        ...theme.layout?.cardContainer,
      })}
      className={clsx("wx-card", className)}
    >
      <Box
        sx={{
          position: "relative",
        }}
      >
        <YouTubeVidePreview
          isLoading={isLoading}
          objectFit={imageCover}
          showPlayIcon={cardWidth > 180}
          showTime={cardWidth > 150}
          alt={imageAltText}
          url={link}
          image={image}
          time={text8}
        />
      </Box>
      {cardWidth > 150 && (
        <Box p={3} className="fr-card-body wx-card-body">
          <Stack gap={2}>
            <Link
              href={link}
              target="_blank"
              className="fr-title-content"
              disabled={isLoading}
              sx={{
                color: "inherit",
                fontWeight: "var(--font-weight-bold)",
                lineHeight: "1.3",
                cursor: "pointer",
                textDecoration: "none",
                ...ellipsis(null, 1),
              }}
            >
              {isLoading ? <Skeleton /> : text5}
            </Link>

            <Text
              sx={{
                fontSize: "12px",
                lineHeight: "1.4",
                fontWeight: "var(--font-weight-light)",
              }}
            >
              {isLoading ? <Skeleton width="12ch" /> : text7}
            </Text>
            <Text
              sx={{
                fontSize: "13px",
                lineHeight: "1.4",
                ...ellipsis(null, 3),
              }}
            >
              {isLoading ? <SkeletonLines lines={3} /> : text3}
            </Text>
            {cardWidth > 200 && (
              <Inline
                gap={1}
                alignY="center"
                divider="•"
                sx={{
                  color: "var(--color-gray-800)",
                  fontSize: "12px",
                }}
              >
                {isLoading ? (
                  <Skeleton width="min(100%, 35ch)" />
                ) : (
                  <>
                    <span>{text6} Views</span>
                    <span>{text1} Likes</span>
                    <span>{text2} Comments</span>
                  </>
                )}
              </Inline>
            )}
          </Stack>
        </Box>
      )}
    </Card>
  );
}

const YoutubeAWithRef = React.forwardRef(YoutubeA);

export { YoutubeAWithRef as YoutubeA };