import {
  Box,
  Image,
  Inline,
  Link,
  Skeleton,
  Stack,
  StyleProp,
  Text,
} from "@front10/base-elements";
import * as React from "react";
import { FacebookCardProps } from "./FacebookCard";
import FacebookIcon from "./FacebookIcon";

interface Props {
  profilePicture?: string;
  profileUrl?: string;
  username?: string;
  objectFit: FacebookCardProps["imageCover"];
  isLoading?: boolean;
  userVerified?: boolean;
  date?: string;
  sx?: StyleProp;
  hasRightIcon?: boolean;
  cardWidth?: number;
}

function Avatar(
  props: Pick<
    Props,
    "profileUrl" | "objectFit" | "profilePicture" | "isLoading"
  >
) {
  const image = (
    <Link
      href={props.profileUrl}
      target="_blank"
      sx={{
        width: "100%",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        position: "relative",
        zIndex: 10,
      }}
    >
      <Image
        alt=""
        src={props.profilePicture}
        className="fr-avatar"
        variant="roundedTop"
        sx={{
          objectFit: props.objectFit,
          boxShadow: "0 0 0 2px var(--color-subtle-floating)",
          width: "36px",
          height: "36px",
          borderRadius: "50%",
          transition: "opacity 0.2s ease",
        }}
      />
    </Link>
  );

  return (
    <Skeleton variant="circular" disabled={!props.isLoading}>
      <Box
        sx={{
          minWidth: "36px",
          height: "36px",
          borderRadius: "50%",
        }}
      >
        {image}
      </Box>
    </Skeleton>
  );
}

export function FacebookHeader(props: Props) {
  const avatar = (
    <Avatar
      objectFit={props.objectFit}
      profilePicture={props.profilePicture}
      profileUrl={props.profileUrl}
      isLoading={props.isLoading}
    />
  );

  const headerText = (
    <Stack
      alignY="center"
      sx={{
        width: "100%",
      }}
    >
      {props.isLoading ? (
        <>
          <Skeleton height="16px" /> <Skeleton height="12px" width="80%" />
        </>
      ) : (
        <>
          <Inline alignY="center" gap="1" wrap={false}>
            <Link
              href={props.profileUrl}
              target="_blank"
              disabled={props.profileUrl == null}
              sx={{
                "&:hover": {
                  textDecoration: "underline",
                },
                fontSize: "14px",
                lineHeight: "16px",
                fontWeight: "var(--font-weight-bold)",
                textDecoration: "none",
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
                color: "currentColor",
              }}
            >
              {props.username}
            </Link>
          </Inline>
          <Text
            sx={{
              fontSize: "10px",
              fontWeight: "var(--font-weight-light)",
              textTransform: "uppercase",
            }}
          >
            {props.date}
          </Text>
        </>
      )}
    </Stack>
  );

  const facebookLinkIcon =
    props.hasRightIcon && props.cardWidth && props.cardWidth > 199 ? (
      <Link
        href={props.profileUrl}
        target="_blank"
        disabled={props.profileUrl == null}
        sx={{
          flex: "1 0 auto",
          textAlign: "right",
          color: "currentColor",
        }}
      >
        <FacebookIcon />
      </Link>
    ) : null;

  return (
    <Inline align="space-between" alignY="center" sx={props.sx}>
      <Inline
        gap={3}
        p={3}
        wrap={false}
        alignY="center"
        sx={{
          width: "100%",
          position: "relative",
        }}
      >
        {avatar}
        {headerText}
        {facebookLinkIcon}
      </Inline>
    </Inline>
  );
}