import styled, { keyframes, css } from 'styled-components';
import { convertToTransientProps, getFontSize, getColorAlias, getSpacing } from '../../utils/index.js';

const fadeIn = keyframes `
    from {
        opacity: 0;
    }
    to {
        opacity: 0.85;
    }
`;
const fadeOut = keyframes `
    from {
        opacity: 0.85;
    }
    to {
        opacity: 0;
    }
`;
const Wrapper = styled.div `
  font-family: ${(props) => props.theme.font.familyPrimary};
  cursor: default;
  span {
    cursor: pointer;
  }
`;
const TooltipTitle = styled.div `
  font-weight: ${(props) => props.theme.font.weightBold};
`;
const PopoverContainer = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'isVisible',
        'isManual',
        'nonStaticWidth',
    ]),
}) `
  display: flex;
  position: relative;
  flex-direction: column;
  ${(props) => props.variant === 'icon' ? getFontSize('size12') : getFontSize('size14')};
  background-color: ${getColorAlias('containerInverse')};
  opacity: 0.85;
  color: ${getColorAlias('contentInverse')};
  width: ${(props) => (props.nonStaticWidth ? '100%' : 'auto')};
  border-radius: ${(props) => props.variant === 'icon'
    ? `${props.theme.radius.roundedE} ${props.theme.radius.roundedE}`
    : props.theme.radius.roundedB};
  ${(props) => props.width &&
    props.variant === 'definition' &&
    !props.nonStaticWidth &&
    css `
      width: ${props.width};
      max-width: 280px;
      min-width: 160px;
    `};
  padding: ${(props) => props.variant === 'icon'
    ? css `
          ${getSpacing('s01', 's03')}
        `
    : css `
          ${getSpacing('s02', 's03')}
        `};
  ${(props) => props.isManual &&
    css `
      padding-right: 40px;
    `}

  @media(max-width: 600px) {
    ${(props) => props.variant === 'icon' &&
    css `
        padding: 6px 12px;
        ${getFontSize('size14')};
      `}
  }

  z-index: 999;
  animation: ${(props) => (props.isVisible ? fadeIn : fadeOut)}
    ${(props) => props.theme.motion.speed.defaultM} ease-in-out;
`;
const CloseIconContainer = styled.span `
  position: absolute;
  top: 0px;
  right: 4px;
  cursor: pointer;
  svg {
    fill: ${getColorAlias('contentInverse')};
  }
`;

export { CloseIconContainer, PopoverContainer, TooltipTitle, Wrapper };
