import { styled, css } from "../../../build/utils/styled-components.js";
import themeGet from "../../utils/theme-get.js";
import { Box } from "../box/index.js";
const ARROW_WIDTH = 7;
const topCSS = css`
  margin-top: -${props => props.isVisible ? themeGet('space', 'lg')(props) : '0px'};

  &::after, &::before {
    top: 100%;
    left: 50%;
  }

  &::after {
    margin-left: -${ARROW_WIDTH}px;
    border-color: ${themeGet('colors', 'grey20')} transparent transparent transparent;
  }

  &::before {
    margin-left: -${ARROW_WIDTH - 1}px;
    border-color: ${themeGet('colors', 'highlight')} transparent transparent transparent;
  }
`;
const bottomCSS = css`
  margin-top: ${props => props.isVisible ? themeGet('space', 'lg')(props) : '0px'};

  &::after, &::before {
    bottom: 100%;
    left: 50%;
  }

  &::after {
    margin-left: -${ARROW_WIDTH}px;
    border-color: transparent transparent ${themeGet('colors', 'grey20')} transparent;
  }

  &::before {
    margin-left: -${ARROW_WIDTH - 1}px;
    border-color: transparent transparent ${themeGet('colors', 'highlight')} transparent;
  }
`;
const leftCSS = css`
  margin-left: -${props => props.isVisible ? themeGet('space', 'lg')(props) : '0px'};

  &::after, &::before {
    left: 100%;
    top: 50%;
  }

  &::after {
    margin-right: -${ARROW_WIDTH}px;
    margin-top: -${ARROW_WIDTH}px;
    border-color: transparent transparent transparent ${themeGet('colors', 'grey20')};
  }

  &::before {
    margin-right: -${ARROW_WIDTH - 1}px;
    margin-top: -${ARROW_WIDTH - 1}px;
    border-color: transparent transparent transparent ${themeGet('colors', 'highlight')};
  }
`;
const rightCSS = css`
  margin-left: ${props => props.isVisible ? themeGet('space', 'lg')(props) : '0px'};

  &::after, &::before {
    right: 100%;
    top: 50%;
  }

  &::after {
    margin-left: -${ARROW_WIDTH}px;
    margin-top: -${ARROW_WIDTH}px;
    border-color: transparent ${themeGet('colors', 'grey20')} transparent transparent;
  }

  &::before {
    margin-left: -${ARROW_WIDTH - 1}px;
    margin-top: -${ARROW_WIDTH - 1}px;
    border-color: transparent ${themeGet('colors', 'highlight')} transparent transparent;
  }
`;
const getPadding = props => {
  const px = props.size === 'lg' ? 'xl' : 'md';
  const py = props.size === 'lg' ? 'lg' : 'sm';
  return `${themeGet('space', py)(props)} ${themeGet('space', px)(props)}`;
};
const StyledTooltip = styled(Box)`
  transition: opacity 0.2s, margin 0.2s;

  position: absolute;

  opacity: ${({
  isVisible
}) => isVisible ? '1' : '0'};
  
  padding: ${props => getPadding(props)};

  pointer-events: none;
  
  &::after {
    content: " ";
    position: absolute;
    border-style: solid;
    border-width: 7px;
    z-index: 1;
  }
  &::before {
    content: " ";
    position: absolute;
    border-style: solid;
    border-width: 6px;
    z-index: 2;
  }

  ${props => ({
  top: topCSS,
  bottom: bottomCSS,
  left: leftCSS,
  right: rightCSS
})[props.direction]}
`;
StyledTooltip.defaultProps = {
  borderColor: 'grey20',
  borderStyle: 'solid',
  borderWidth: '1px',
  bg: 'highlight',
  borderRadius: '3px'
};
export default StyledTooltip;
export { StyledTooltip };