import styled from "styled-components";
import { ModalProps } from ".";
import {
  purpleBase,
  whiteBackground,
  grayBase,
  BodyText,
  Label,
} from "../constants";

const getModalWidth = (size: string | undefined) => {
  let width;
  if (size == "s") width = 340;
  else if (size == "l") width = 800;
  else width = 500;
  return width;
};

export const ModalContainer = styled.div<ModalProps>`
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  overflow: hidden;
  outline: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: ${(props) => `${props.showModal ? "" : "none"}`};
`;

export const Modal = styled.div<ModalProps>`
  width: ${(props) =>
    `${props.modalType === "browse" ? "800px" : getModalWidth(props.size)}px`};
  height: ${(props) => `${props.modalType === "browse" ? "541px" : "auto"}`};
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: ${whiteBackground};
  border-radius: 4px;
  padding: 12px;
  // modal centered on the page
  position: absolute;
  left: 50%;
  top: ${(props) => `${props.topPosition ? props.topPosition : 50}%`};
  transform: translate(-50%, -50%);
  @media (max-width: 768px) {
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 20px 16px;
  }
`;

export const ModalBodyContainer = styled.div`
  ${BodyText}
  color: ${grayBase};
  padding: 0 16px 16px 16px;
`;

export const CloseIcon = styled.img<ModalProps>`
  cursor: pointer;
  display: ${(props) => `${props.noClose ? "none" : ""}`};
`;

export const ModalTitle = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 16px;
  marginleft: 16px;
  @media (max-width: 768px) {
    padding: 8px 0px;
  }
  div {
    ${Label}
    color: ${purpleBase};
    @media (max-width: 768px) {
      margin-left: 16px;
    }
  }
`;

export const Overlay = styled.div`
  background-color: ${grayBase};
  opacity: 0.25;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
`;

export const ButtonContainer = styled.div`
  display: flex;
  gap: 16px;
  padding: 0 16px;
  width: 100%;
  @media (max-width: 768px) {
    flex-direction: column;
  }
`;

export const ModalUpperContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
`;
