/** @format */

import React, { ReactElement } from "react";
import styled from "styled-components";
import ReactModal from "react-modal";
import Confetti from "react-confetti";
import { Button } from "./";
import { useWindowSize } from "../hooks";

const TitleContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
`;

const Title = styled.div`
  font-size: 18px;
  font-weight: 600;
  color: ${({ theme }) => theme.primaryDark};
`;

interface ModalProps {
  isOpen: boolean;
  onRequestClose: () => void;
  title?: string;
  style?: any;
  children: ReactElement;
  removeCross?: boolean;
  color?: string;
  backgroundColor?: string;
  confetti?: boolean;
  customConfetti?: any;
}

function Modal({
  isOpen,
  onRequestClose,
  title,
  style,
  children,
  removeCross,
  confetti,
  color,
  backgroundColor,
  customConfetti,
}: ModalProps) {
  const { width: windowWidth, height: windowHeight } = useWindowSize();
  const modalStyles = {
    overlay: {
      backgroundColor: "rgba(0, 0, 0, 0.75)",
      zIndex: 11,
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    },
    content: {
      overflow: "auto",
      border: "5px solid black",
      borderRadius: "10px",
      padding: "0",
      inset: "auto",
      maxHeight: "90vh",
      maxWidth: "90vw",
    },
    ...style,
  };
  return (
    <ReactModal
      isOpen={isOpen}
      onRequestClose={onRequestClose}
      style={modalStyles}
      ariaHideApp={false}
    >
      <>
        <TitleContainer>
          {title ? <Title>{title}</Title> : <div></div>}
          {!removeCross && (
            <Button
              fontSize="14px"
              color={color}
              backgroundColor={backgroundColor}
              onClick={onRequestClose}
              padding="5px 10px"
            >
              x
            </Button>
          )}
        </TitleContainer>
        {children}
      </>
      {confetti && (
        <Confetti
          width={windowWidth}
          height={windowHeight}
          drawShape={customConfetti && customConfetti}
        />
      )}
    </ReactModal>
  );
}

export default Modal;