import styled from "styled-components";

import Box from "@src/components/UI/Box";
import Icon from "@src/components/UI/Icon";
import Button from "@src/components/UI/Button";

export const modalWidth = "480px";
const zIndex = 999999999;

export const ModalWrapper = styled(Box)({
  position: "fixed",
  top: "0",
  left: "0",
  width: "100vw",
  height: "100%",
  zIndex: zIndex + 10,
  overflow: "hidden",
  pointerEvents: "none",
});

export const ModalOverlay = styled(Box)({
  position: "absolute",
  top: "0",
  left: "0",
  width: "100%",
  height: "100%",
  backgroundColor: "#000",
  opacity: "0",
  transition: "0.2s linear",
  pointerEvents: "auto",
  "&.modal-active": {
    opacity: "0.4 !important",
  },
});

const MoadlStyle = props => ({
  opacity: "0",
  position: "absolute",
  zIndex: 2,
  backgroundColor: props.theme.colors.grey.pastel,
  outline: "none",
  boxShadow: "0px 5px 25px rgba(0, 0, 0, 0.15)",
  boxSizing: "border-box",
  transition: "0.5s cubic-bezier(0.175, 0.5, 0.12, 1)",
  transform: "translate3d(-50%, -45%, 0)",
  top: "50%",
  left: "50%",
  borderRadius: "5px",
  pointerEvents: "auto",
  "&.modal-active": {
    opacity: "1 !important",
    transform: "translate3d(-50%, -50%, 0) !important",
  },
  width: props.width,
  flexDirection: "column",
  alignItems: "center",
});

export const Modal = styled(Box)(MoadlStyle);

export const IconBox = styled(Icon)({
  position: "absolute",
  top: "15px",
  right: "15px",
});

const ButtonStyle = props => ({
  margin: props.theme.space.sm,
  padding: `${props.theme.space.md}px ${2 * props.theme.space.md}px`,
});
export const ButtonBox = styled(Button)(ButtonStyle);
