import React from "react";
import {
  Modal,
  ModalContainer,
  ModalTitle,
  Overlay,
  CloseIcon,
  ButtonContainer,
  ModalBodyContainer,
  ModalUpperContainer,
} from "./ModalStyles";
import { RooButton, RooButtonProps } from "../RooButton";
export interface RooModalProps {
  size?: "s" | "m" | "l";
  modalTitle?: string;
  modalBody?: React.ReactNode;
  showModal?: boolean;
  onCloseModal?: () => void;
  noClose?: boolean;
  modalType?: "browse" | "photo upload";
  primaryButtonProps?: RooButtonProps;
  secondaryButtonProps?: RooButtonProps;
}

const close = new URL("./assets/close.svg", import.meta.url).href;

export const RooModal: React.FC<RooModalProps> = (props) => {
  const {
    size,
    modalTitle,
    modalBody,
    showModal,
    onCloseModal,
    noClose,
    modalType,
    primaryButtonProps,
    secondaryButtonProps,
  } = props;
  return (
    <ModalContainer showModal={showModal}>
      <Overlay />
      <Modal size={size} modalType={modalType}>
        <ModalUpperContainer>
          <ModalTitle>
            <div>{modalTitle}</div>
            <CloseIcon src={close} onClick={onCloseModal} noClose={noClose} />
          </ModalTitle>
          <ModalBodyContainer>{modalBody}</ModalBodyContainer>
        </ModalUpperContainer>
        <ButtonContainer>
          {primaryButtonProps ? <RooButton buttonType="primary" {...primaryButtonProps} /> : null}
          {secondaryButtonProps ? <RooButton buttonType="secondary" {...secondaryButtonProps} />: null}
        </ButtonContainer>
      </Modal>
    </ModalContainer>
  );
};
