import { Inline, Stack, useContainerSize } from "@front10/base-elements";
import * as React from "react";
import { BaseCard } from "./BaseCard";
import { QuotedTweet } from "./QuotedTweet";
import { TweetContent } from "./TweetContent";
import { TweetFooter } from "./TweetFooter";
import { TweetHeader } from "./TweetHeader";
import { TwitterCardProps } from "./TwitterCard";
import { TwitterImages } from "./TwitterImages";
import { TwitterLike } from "./TwitterLike";
import { TwitterRetweet } from "./TwitterRetweet";
import { TwitterVideo } from "./TwitterVideo";

function TwitterB(
  {
    data = {},
    showText1 = true,
    showText2 = false,
    showText3 = true,
    imageCover = "cover",
    onCardClick,
    onCallToActionClick,
    tabIndex,
    showFullPost,
    isLoading,
    ...props
  }: TwitterCardProps,
  ref: React.Ref<HTMLDivElement>
) {
  const isRetweet = Boolean(data.isRetweet && !data.isQuote);
  const {
    text1: retweets,
    text2: likes,
    text3: tweetText,
    link,
    text5: userHandle = "",
    text6: avatar = "",
    text7: createdAt,
    text8: userName = "",
    tweetImage,
    tweetVideo,
    userVerified,
  } = data.retweet && isRetweet ? data.retweet : data;
  const innerTweet = data.retweet;
  const isQuoteTweet = Boolean(data.retweet && data.isQuote);
  const showMedia = !isQuoteTweet || showFullPost;

  const twitterImageLayout =
    showMedia && tweetImage && tweetImage.length > 0 ? (
      <TwitterImages images={tweetImage} />
    ) : null;
  const twitterVideoLayout =
    showMedia && tweetVideo && tweetVideo.length === 1 ? (
      <TwitterVideo video={tweetVideo[0]} />
    ) : null;
  const cardWidth = useContainerSize(ref as any);

  const hasMedia = showMedia && (tweetImage?.length || tweetVideo?.length);
  let lineClamp: number | undefined;
  if (!showFullPost) {
    lineClamp = hasMedia || isQuoteTweet ? 5 : 10;
    if (isRetweet) {
      lineClamp -= 1;
    }
  }

  return (
    <BaseCard onClick={onCardClick} tabIndex={tabIndex} {...props} ref={ref}>
      <TweetHeader
        showAvatar={cardWidth > 140}
        userName={userName}
        userVerified={userVerified}
        avatar={avatar}
        userHandle={userHandle}
        imageCover={imageCover}
        retweetUserName={data.text8}
        retweetUserHandle={data.text5}
        isRetweet={isRetweet}
        showCreatedAt={cardWidth > 230}
        createdAt={createdAt}
        link={link}
        isLoading={isLoading}
      />
      <Stack
        gap={3}
        p="12px"
        pt={0}
        className="fr-card-body wx-card-body"
        sx={{
          height: "100%",
        }}
      >
        <Stack
          gap={3}
          alignY={isQuoteTweet && innerTweet ? undefined : "space-between"}
          sx={{ flex: "1" }}
        >
          <TweetContent lineClamp={lineClamp} isLoading={isLoading}>
            {tweetText}
          </TweetContent>
          {twitterImageLayout}
          {twitterVideoLayout}
          {cardWidth > 145 && isQuoteTweet && innerTweet ? (
            <QuotedTweet
              data={innerTweet}
              imageCover={imageCover}
              showFullPost={showFullPost}
            />
          ) : null}
        </Stack>
        {cardWidth > 145 ? (
          <TweetFooter isLoading={isLoading} link={link}>
            <Inline gap={1}>
              <TwitterRetweet />
              <span>{retweets}</span>
            </Inline>
            <Inline gap={1}>
              <TwitterLike />
              <span>{likes}</span>
            </Inline>
          </TweetFooter>
        ) : null}
      </Stack>
    </BaseCard>
  );
}

const TwitterBWithRef = React.forwardRef(TwitterB);

export { TwitterBWithRef as TwitterB };