import { Button, Inline, Link, Skeleton } from "@front10/base-elements";
import * as React from "react";
import InstagramCardCommentsIcon from "./InstagramCardCommentsIcon";
import InstagramCardLikesIcon from "./InstagramCardLikesIcon";
import InstagramCardShareIcon from "./InstagramCardShareIcon";

interface Props {
  showShare?: boolean;
  isLoading?: boolean;
  link?: string;
  likes?: string;
  comments?: string;
  align?: "left" | "center";
  size?: "regular" | "small";
}

const isSharingAvailable = () =>
  typeof navigator !== "undefined" && navigator.share != null;

function share(link: string) {
  if (isSharingAvailable()) {
    navigator.share({
      url: link,
    });
  }
}

const stopPropagation = (event: React.MouseEvent) => {
  event.stopPropagation();
};

export function InstagramReactions(props: Props) {
  const center = props.align === "center";
  const small = props.size === "small";
  const textStyles = {
    fontSize: small ? "12px" : "14px",
    fontWeight: "400",
    color: "currentColor",
    display: "inline-flex",
    alignItems: "center",
    textDecoration: "none",
    padding: 0,
    margin: 0,
    cursor: "pointer",
  };
  const link = props.link;

  if (!props.isLoading && !props.comments && !props.likes) {
    return null;
  }

  return (
    <Inline align={center ? "center" : "space-between"}>
      <Skeleton
        variant="rectangular"
        disabled={!props.isLoading}
        width={center ? "8ch" : "100%"}
        height={small ? "16px" : "24px"}
      >
        <Inline gap={3}>
          {props.likes || props.isLoading ? (
            <Link
              href={props.link}
              disabled={props.link == null}
              target="_blank"
              sx={textStyles}
              onClick={stopPropagation}
            >
              <InstagramCardLikesIcon
                size={small ? "16px" : undefined}
                style={{ marginRight: 4 }}
                aria-label="Likes"
              />
              {props.likes}
            </Link>
          ) : null}
          {props.comments ? (
            <Link
              href={props.link}
              disabled={props.link == null}
              target="_blank"
              sx={textStyles}
              onClick={stopPropagation}
            >
              <InstagramCardCommentsIcon
                size={small ? "16px" : undefined}
                style={{ marginRight: 4 }}
                aria-label="Comments"
              />
              {props.comments}
            </Link>
          ) : null}
        </Inline>
        {isSharingAvailable() && link && props.showShare ? (
          <Button
            variant="icon"
            onClick={(event) => {
              share(link);
              event.stopPropagation();
            }}
            sx={textStyles}
          >
            <InstagramCardShareIcon
              style={{ marginRight: 4 }}
              aria-hidden="true"
            />
            Share
          </Button>
        ) : null}
      </Skeleton>
    </Inline>
  );
}