import styled from "styled-components";

const getWidth = (size: string | undefined) => {
	switch (size) {
		case "M":
			return "640px";
		case "L":
			return "896px";
		case "XL":
			return "1088px";
		default:
			return "512px";
	}
};

const getHeight = (size: string | undefined) => {
	switch (size) {
		case "M":
			return "384px";
		case "L":
			return "512px";
		case "XL":
			return "640px";
		default:
			return "320px";
	}
};

const getModalHeight = (height?: number | string, size?: string) => {
	const heightProp = typeof height === "number" ? `${height}px` : height;
	return height !== undefined ? heightProp : getHeight(size);
};

const ModalOverlay = styled.div<{ isChild?: boolean }>`
  position: fixed;
  top: 0;
  left: 0;
  z-index: ${(p) => (p.isChild ? "1260" : "1240")};
  width: 100vw;
  height: 100vh;
  background: ${(p) => p.theme.color.overlay};
  body.modal-open:not(&) {
    overflow: hidden;
  }
`;

const ModalWrapper = styled.div<{ isChild?: boolean }>`
  position: fixed;
  top: 0;
  left: 0;
  z-index: ${(p) => (p.isChild ? "1270" : "1250")};
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
`;

const Modal = styled.div<{ size?: string; height?: number | string }>`
  z-index: 100;
  display: flex;
  flex-flow: column nowrap;
  background: ${(p) => p.theme.color.uiBackground01};
  position: relative;
  margin: auto;
  border-radius: 4px;
  width: ${(p) => getWidth(p.size)};
  height: ${(p) => getModalHeight(p.height, p.size)};
  max-height: 80vh;
  box-shadow: ${(p) => p.theme.shadow.shadowXL};
  top: 50%;
  transform: translateY(-50%);
`;

const ModalHeader = styled.div`
  background: ${(p) => p.theme.color.uiBarBackground};
  display: flex;
  padding: ${(p) => p.theme.spacing.s};
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
`;

const ModalContent = styled.div<{ overflow: string | undefined }>`
  position: relative;
  flex-grow: 1;
  overflow: ${(p) => p.overflow};
`;

const Title = styled.div`
  ${(p) => p.theme.textStyle.headingM};
  color: ${(p) => p.theme.color.textHighEmphasis};
`;

const ButtonWrapper = styled.div`
  display: flex;
  margin-left: auto;
  align-content: center;
`;

const ModalFooter = styled.div`
  bottom: 0;
  left: 0;
  width: 100%;
  background: ${(p) => p.theme.color.uiBackground01};
  display: flex;
  justify-content: flex-end;
  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
  button:not(:first-child) {
    margin-left: ${(p) => p.theme.spacing.s};
  }
  border-radius: 0 0 4px 4px;
`;

const SearchWrapper = styled.div`
  display: flex;
  justify-content: flex-end;
  margin-right: ${(p) => p.theme.spacing.xs};

  & > div {
    margin-top: -9px;
    margin-bottom: -9px;
    display: flex
    justify-content: center;
    align-items: center;
  }
`;

const IconWrapper = styled.div`
  flex-shrink: 0;
`;

export {
	ButtonWrapper,
	IconWrapper,
	Modal,
	ModalContent,
	ModalFooter,
	ModalHeader,
	ModalOverlay,
	ModalWrapper,
	SearchWrapper,
	Title,
};
