import { Box, Stack } from "@front10/base-elements";
import * as React from "react";
import { TweetContent } from "./TweetContent";
import { TweetHeader } from "./TweetHeader";
import { TwitterCardProps } from "./TwitterCard";
import { TwitterImages } from "./TwitterImages";
import { TwitterVideo } from "./TwitterVideo";

export function QuotedTweet({
  data: {
    text3: tweetText,
    link,
    text5: userHandle,
    text6: avatar,
    text8: userName,
    tweetImage,
    tweetVideo,
    userVerified,
  } = {},
  imageCover,
  showFullPost,
}: Pick<TwitterCardProps, "data" | "imageCover" | "showFullPost">) {
  const hasText = Boolean(tweetText?.length);
  const showMedia = !hasText || showFullPost;
  const twitterImageLayout =
    showMedia && tweetImage && tweetImage.length > 0 ? (
      <TwitterImages images={tweetImage} />
    ) : null;
  const twitterVideoLayout =
    showMedia && tweetVideo && tweetVideo.length === 1 ? (
      <TwitterVideo video={tweetVideo[0]} />
    ) : null;

  return (
    <Box sx={{ borderRadius: 16, border: "1px solid var(--color-gray-300)" }}>
      <TweetHeader
        userName={userName || ""}
        userVerified={userVerified}
        avatar={avatar || ""}
        userHandle={userHandle || ""}
        imageCover={imageCover}
        link={link}
      />
      <Stack
        gap={3}
        p="12px"
        pt="0"
        className="fr-card-body wx-card-body"
        alignY="space-between"
        sx={{
          height: "100%",
        }}
      >
        {!hasText ? null : (
          <TweetContent lineClamp={showFullPost ? undefined : 4}>
            {tweetText}
          </TweetContent>
        )}
        {twitterImageLayout}
        {twitterVideoLayout}
      </Stack>
    </Box>
  );
}