import { Box, Button, CloseIcon, Stack } from "@front10/base-elements";
import React, { forwardRef } from "react";
import { InstagramCardProps } from "./InstagramCard";
import InstagramCardPostTypeCarouselIcon from "./InstagramCardPostTypeCarouselIcon";
import InstagramCardPostTypeVideoIcon from "./InstagramCardPostTypeVideoIcon";
import { InstagramHeader } from "./InstagramHeader";
import { InstagramReactions } from "./InstagramReactions";

import { InstagramN } from "./InstagramN";

type OwnProps = {
  onClose?: () => void;
  showCloseButton: Boolean;
};

const InstagramM = forwardRef<HTMLDivElement, InstagramCardProps & OwnProps>(
  (
    {
      showCloseButton: _showCloseButton = true,
      data: {
        text8: profileName,
        userVerified,
        text6: avatar,
        image,
        type = "video",
        imageAltText,
        text1: likesCount,
        text2: commentsCount,
        text3: caption,
        text7: createdAt,
        link,
        media,
      },
      showText8: showProfileName = true,
      showText7: showCreatedAt = true,
      showText3: showCaption = true,
      showText2: showCommentsCount = true,
      showText1: showLikes = true,
      imageCover = "cover",
      ...props
    },
    ref
  ) => {
    const vHeight = window.innerHeight;
    const refCard = React.useRef() as React.MutableRefObject<HTMLInputElement>;

    return (
      <Box sx={{ position: "relative" }}>
        {_showCloseButton && (
          <Button
            aria-label="Close"
            onClick={props.onClose}
            variant="icon"
            sx={{
              position: "absolute",
              right: "12px",
              top: "12px",
              display: "flex",
              zIndex: 10,
              cursor: "pointer",
              background: "transparent",
              padding: 0,
              borderRadius: 0,
              border: "none",
              "@media(max-width: 550px)": {
                padding: 8,
                background: "var(--color-background)",
                right: 0,
                top: 0,
                "&& svg": {
                  width: 14,
                  height: 14,
                  fill: "currentColor",
                  stroke: "currentColor",
                  strokeWidth: "70px",
                  transition: "opacity .2s ease-in-out",
                  opacity: 0.6,
                },
                "&:hover svg": {
                  opacity: 1,
                },
              },
            }}
          >
            <CloseIcon size={18} fill="currentColor" />
          </Button>
        )}
        <Box
          bg="var(--color-subtle-floating)"
          sx={{
            display: "grid",
            gridTemplateColumns: "6fr 4fr",
            borderRadius: 0,
            gridTemplateRows: "max(600px, 70vh)",
            "@media(max-width: 550px)": {
              height: `${vHeight}px`,
              gridTemplateColumns: "1fr",
              gridTemplateRows: `50% 50%`,
            },
          }}
          {...props}
          ref={ref}
        >
          <Box
            sx={{
              "& img": {
                width: "100%",
                height: "100%",
                objectFit: imageCover,
                objectPosition: "center",
              },
              position: "relative",
              "@media(max-width: 550px)": {
                "& .fr-icon-type-post": {
                  left: "0.6em",
                },
              },
            }}
          >
            {media ? (
              <InstagramN
                data={{
                  profileName,
                  userVerified,
                  avatar,
                  image,
                  type,
                  imageAltText,
                  likesCount,
                  commentsCount,
                  caption,
                  createdAt,
                  link,
                  media,
                }}
                draggable={false}
                showDots={true}
                ref={refCard}
                {...props}
              />
            ) : (
              <img src={image} alt={imageAltText} />
            )}

            {type === "video" && <InstagramCardPostTypeVideoIcon />}
            {type === "carousel" && <InstagramCardPostTypeCarouselIcon />}
          </Box>
          <Stack>
            <InstagramHeader
              profilePicture={avatar}
              username={profileName}
              profileUrl={link}
              userVerified={userVerified}
              date={createdAt}
              objectFit={imageCover}
            />
            <Box
              sx={{
                fontSize: "14px",
                lineHeight: "1.3",
                flex: 1,
                overflowY: "auto",
                wordBreak: "break-word",
                whiteSpace: "pre-wrap",
                padding: "12px",
              }}
            >
              {showCaption && caption}
            </Box>
            <Box p="12px">
              <InstagramReactions
                comments={commentsCount}
                likes={likesCount}
                isLoading={props.isLoading}
                link={link}
                showShare={true}
              />
            </Box>
          </Stack>
        </Box>
      </Box>
    );
  }
);

export { InstagramM };