import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { direction, StyledTooltipProps } from "./Tooltip";

const SPACING = 6;
const DEFAULT_BG = "grey";
const DEFAULT_COLOR = "white";

const handleTooltipPosition = (direction: direction) => {
  const value = `calc(100% + ${SPACING * 2}px)`;
  switch (direction) {
    case "top":
      return `bottom: ${value};`;
    case "right":
      return `left: ${value};`;
    case "bottom":
      return `top: ${value};`;
    case "left":
      return `right: ${value};`;
  }
};

const handleArrowPosition = (direction: direction, background: string) => {
  const beforePseudo = (rules: string) =>
    `
      &::before {
        ${rules}
        ${direction}: 100%;
        border-${direction}-color: ${DEFAULT_BG};
        border-${direction}-color: ${background};
      }
    `;

  const xAlign: string = `left: 50%; transform: translateX(-50%);`;
  const yAlign: string = `top: 50%; transform: translateY(-50%);`;

  if (["top", "bottom"].includes(direction)) return beforePseudo(xAlign);
  else return beforePseudo(yAlign);
};

const StyledTooltip = styled.div<StyledTooltipProps>`
  position: absolute;
  border-radius: 4px;
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  z-index: 100;
  white-space: nowrap;
  background-color: ${DEFAULT_BG};
  color: ${DEFAULT_COLOR};

  ${({ background, color }) => {
    return css`
      background-color: ${background};
      color: ${color};
    `;
  }}

  &::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    border-width: ${SPACING}px;
  }

  ${({ direction }) => {
    return css`
      ${handleTooltipPosition(direction)}
    `;
  }}

  ${({ background, direction }) => {
    return (
      background &&
      css`
        ${handleArrowPosition(direction, background)}
      `
    );
  }}

  ${({ direction }) => {
    return (
      ["top", "bottom"].includes(direction) &&
      css`
        left: 50%;
        transform: translateX(-50%);
      `
    );
  }}

  ${({ direction }) => {
    return (
      ["left", "right"].includes(direction) &&
      css`
        top: 50%;
        transform: translateY(-50%);
      `
    );
  }}
`;

export default StyledTooltip;