import {
  AspectImage,
  Inline,
  Link,
  Skeleton,
  Stack,
} from "@front10/base-elements";
import * as React from "react";
import { parseEmoji } from "./strings";
import { TwitterCardData, TwitterCardProps } from "./TwitterCard";
import { TwitterRetweet } from "./TwitterRetweet";
import { TwitterVerifiedBadge } from "./TwitterVerifiedBadge";

type DataProps = Pick<TwitterCardData, "userVerified" | "link">;

interface Props extends DataProps {
  userName: string;
  userHandle: string;
  avatar: string;
  isRetweet?: boolean;
  retweetUserName?: string;
  retweetUserHandle?: string;
  createdAt?: string;
  imageCover: TwitterCardProps["imageCover"];
  showAvatar?: boolean;
  showCreatedAt?: boolean;
  isLoading?: boolean;
}

function TweetHeaderElement({
  userName,
  userHandle,
  avatar,
  isRetweet = false,
  retweetUserName = "",
  retweetUserHandle,
  link,
  imageCover,
  userVerified,
  showAvatar = true,
  showCreatedAt,
  createdAt,
  isLoading,
}: Props) {
  const accountName = parseEmoji(userName);
  return (
    <Stack
      p="12px"
      gap="12px"
      sx={{
        width: "100%",
        position: "relative",
      }}
    >
      {isRetweet ? (
        <Inline
          gap={1}
          wrap={false}
          alignY="center"
          sx={{ fontSize: "12px", color: "#657786" }}
        >
          <TwitterRetweet variant="thick" />
          <Link
            href={`https://www.twitter.com/${retweetUserHandle}`}
            target="_blank"
            sx={{
              fontWeight: "var(--font-weight-light)",
              textDecoration: "none",
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
              color: "currentColor",
              "&:hover": {
                textDecoration: "underline",
              },
            }}
            dangerouslySetInnerHTML={{
              __html: `${parseEmoji(retweetUserName)} retweeted`,
            }}
          />
        </Inline>
      ) : null}
      <Inline gap="5px" wrap={false}>
        {showAvatar ? (
          <Skeleton
            variant="circular"
            disabled={!isLoading}
            height="32px"
            width="32px"
          >
            <Link
              href={link}
              target="_blank"
              sx={{
                width: "32px",
              }}
            >
              <AspectImage
                alt={userHandle}
                src={avatar}
                className="fr-avatar"
                variant="roundedTop"
                ratio={1}
                sx={{
                  objectFit: imageCover,
                  borderRadius: "50%",
                  transition: "all 0.2s ease",
                }}
              />
            </Link>
          </Skeleton>
        ) : null}
        <Stack alignY="center" sx={{ flex: "1" }}>
          {isLoading ? (
            <>
              <Skeleton height="16px" />
              <Skeleton height="12px" width="80%" />
            </>
          ) : (
            <>
              <Inline alignY="center" wrap={false}>
                <Link
                  href={link}
                  target="_blank"
                  sx={{
                    lineHeight: 1.3,
                    fontWeight: "var(--font-weight-bold)",
                    textDecoration: "none",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    color: "currentColor",
                    "&:hover": {
                      textDecoration: "underline",
                    },
                  }}
                  dangerouslySetInnerHTML={{ __html: accountName }}
                />
                {userVerified ? <TwitterVerifiedBadge /> : null}
              </Inline>

              <Inline
                gap={1}
                divider="•"
                sx={{
                  color: "var(--color-gray-600)",
                  fontSize: "12px",
                  fontWeight: "var(--font-weight-light)",
                }}
              >
                <Link
                  href={link}
                  target="_blank"
                  sx={{
                    textDecoration: "none",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    color: "currentColor",
                    "&:hover": {
                      textDecoration: "underline",
                    },
                  }}
                >
                  @{userHandle}
                </Link>
                {showCreatedAt ? <span>{createdAt}</span> : null}
              </Inline>
            </>
          )}
        </Stack>
      </Inline>
    </Stack>
  );
}

export const TweetHeader = React.memo(TweetHeaderElement);