import { SxProps, styled } from "@mui/material/styles";
import { forwardRef } from "react";
import { useModal } from "../../contexts/modal";
import { callAll } from "../../lib/callAll";

interface Props {
  variant?: "modal" | "popup";
  onClose?: () => void;
  hideCloseButton?: boolean;
  children: React.ReactNode;
  dataTestId?: string;
  sx?: SxProps;
}

export const BaseWrapper = styled("div")<Pick<Props, "variant">>`
  box-shadow: 1px 2px 11px 0px #00123d5e;
  max-height: 90vh;
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  background: #fbfbff;
  border-radius: 24px;
  transform: translate(-50%, -50%);

  ${({ variant }) => {
    if (variant === "modal") {
      return `
        width: 80vw;
        max-width: 510px;
        padding: 52px 24px 34px 24px;
        max-height: 80vh;
        overflow: auto;
      `;
    }
    if (variant === "popup") {
      return `
        width: 320px;
        height: 320px;
      `;
    }
  }}
`;

export const CloseButton = styled("img")`
  cursor: pointer;
  position: absolute;
  top: 24px;
  right: 24px;
`;

export const ModalWrapper = forwardRef<HTMLDivElement, Props>(
  (
    {
      children,
      onClose,
      variant = "modal",
      hideCloseButton = false,
      dataTestId = "modal",
      sx,
    },
    ref,
  ) => {
    const { closeModal } = useModal();

    return (
      <BaseWrapper variant={variant} data-testid={dataTestId} sx={sx} ref={ref}>
        {variant !== "popup" && !hideCloseButton && (
          <CloseButton
            data-testid="close-modal-button"
            alt="close"
            onClick={callAll(closeModal, onClose)}
            src="/icons/Close.svg"
          />
        )}
        {children}
      </BaseWrapper>
    );
  },
);