import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { horizontal, PositionProps, vertical } from "../Menu";

const handleHorizontalPosition = (horizontal: horizontal) => {
  switch (horizontal) {
    case "left":
      return "0%";
    case "center":
      return "50%";
    case "right":
      return "100%";
    default:
      return "0%";
  }
};

const handleVerticalPosition = (vertical: vertical) => {
  switch (vertical) {
    case "bottom":
      return "100%";
    case "center":
      return "50%";
    case "top":
      return "0%";
    default:
      return "100%";
  }
};

const StyledMenuList = styled.ul<PositionProps>`
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  width: max-content;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;

  ${({ horizontal, horizontalOffset, vertical, verticalOffset }) => {
    return css`
      top: calc(${handleVerticalPosition(vertical)} + ${Number(verticalOffset)}px);
      left: calc(${handleHorizontalPosition(horizontal)} + ${Number(horizontalOffset)}px);
    `;
  }}
`;

export default StyledMenuList;