import {
  Box,
  Image,
  Inline,
  Link,
  Skeleton,
  Stack,
  StyleProp,
  Text,
} from "@front10/base-elements";
import * as React from "react";
import { InstagramCardProps } from "./InstagramCard";
import { InstagramVerifiedBadge } from "./InstagramVerifiedBadge";
import InstagramCardInstagramIcon from "./InstagramCardInstagramIcon";

interface Props {
  profilePicture?: string;
  profileUrl?: string;
  username?: string;
  objectFit: InstagramCardProps["imageCover"];
  isLoading?: boolean;
  userVerified?: boolean;
  date?: string;
  showBrandIcon?: boolean;
  variant?: "inline" | "block";
  sx?: StyleProp;
}

function Avatar(
  props: Pick<
    Props,
    "profileUrl" | "objectFit" | "profilePicture" | "isLoading" | "variant"
  >
) {
  const image = (
    <Link
      href={props.profileUrl}
      target="_blank"
      sx={{
        width: "100%",
        height: "100%",
        display: "flex",
        justifyContent: props.variant === "block" ? "flex-start" : "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: "28px",
          height: "28px",
          borderRadius: "50%",
          transition: "opacity 0.2s ease",
        }}
      />
    </Link>
  );

  if (props.variant === "block") {
    return props.isLoading ? (
      <div
        style={{
          backgroundColor: "var(--color-subtle-floating)",
          position: "relative",
          width: "30px",
          borderRadius: "50%",
          boxShadow: "0 0 0 2px var(--color-subtle-floating)",
        }}
      >
        <Skeleton
          variant="circular"
          width="30px"
          height="30px"
          disabled={!props.isLoading}
        />
      </div>
    ) : (
      image
    );
  }

  return (
    <Skeleton variant="circular" disabled={!props.isLoading}>
      <Box
        sx={{
          background:
            "linear-gradient(40deg, #f99b4a 15%, #dd3071 50%, #c72e8d 85%)",
          minWidth: "36px",
          height: "36px",
          borderRadius: "50%",
        }}
      >
        {image}
      </Box>
    </Skeleton>
  );
}

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

  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>
            {props.userVerified ? <InstagramVerifiedBadge /> : null}
          </Inline>
          <Text
            sx={{
              fontSize: "10px",
              fontWeight: "var(--font-weight-light)",
              textTransform: "uppercase",
            }}
          >
            {props.date}
          </Text>
        </>
      )}
    </Stack>
  );

  if (props.variant === "block") {
    return (
      <Stack gap={2} sx={{ width: "100%", ...props.sx }}>
        {avatar}
        {headerText}
      </Stack>
    );
  }

  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}
        {props.showBrandIcon ? (
          <Link
            href={props.profileUrl}
            target="_blank"
            disabled={props.profileUrl == null}
            sx={{
              flex: "1 0 auto",
              textAlign: "right",
              color: "currentColor",
            }}
          >
            <InstagramCardInstagramIcon />
          </Link>
        ) : null}
      </Inline>
    </Inline>
  );
}