import styled from "styled-components";

const Wrapper = styled.div`
  position: relative;
`;

const ButtonWrapper = styled.div`
  display: flex;
  align-items: center;
  cursor: pointer;
`;

const MenuWrapper = styled.div<{
	isInAppBar?: boolean;
	position: string;
	offset?: number;
	openUpward?: boolean;
	leftwardOffset?: number;
	isVisible?: boolean;
}>`
  && {
    max-width: initial;
  }
  position: absolute;
  z-index: 7;
  visibility: ${(p) => (p.isVisible ? "visible" : "hidden")};
  ${(p) =>
		p.leftwardOffset
			? `right: ${p.leftwardOffset}px; left: auto;`
			: `${p.position}: ${p.offset ? `${p.offset}px` : "0"};`}
  ${(p) =>
		p.openUpward
			? `bottom: 100%; padding-bottom: ${p.theme.spacing.xs};`
			: `top: 100%; padding-top: ${p.isInAppBar ? p.theme.spacing.s : p.theme.spacing.xs};`}
`;

const Menu = styled.div<{ hasMargin: boolean; width?: number }>`
  padding: ${(p) => (p.hasMargin ? `${p.theme.spacing.xs} 0` : `${p.theme.spacing.xs} 0 0 0`)};
  width: ${(p) => (p.width ? `${p.width}px` : "auto")};
  max-width: ${(p) => `calc(${p.theme.spacing.l} * 5)`};
  min-width: ${(p) => `calc(${p.theme.spacing.m} * 7)`};
  background: ${(p) => p.theme.color.uiBackground02};
  box-shadow: ${(p) => p.theme.shadow.shadowL};
  border-radius: ${(p) => p.theme.spacing.xxs};
`;

export { Wrapper, ButtonWrapper, MenuWrapper, Menu };
