export const POPTIP_ID = 'component-poptip';

/**
 * 默认类名
 */
export const CLASS_NAME = {
  CONTAINER: 'component-poptip',
  ARROW: 'component-poptip-arrow',
  TEXT: 'component-poptip-text',
};

/**
 * 默认 style
 */
export const POPTIP_STYLE = {
  // 容器 默认 style
  [`.${CLASS_NAME.CONTAINER}`]: {
    visibility: 'visible',
    position: 'absolute',
    'background-color': 'rgba(0, 0, 0)',
    'box-shadow': '0px 0px 10px #aeaeae',
    'border-radius': '3px',
    color: '#fff',
    opacity: 0.8,
    'font-size': '12px',
    padding: '4px 6px',
    display: 'flex',
    'justify-content': 'center',
    'align-items': 'center',
    'z-index': 8,
    transition: 'visibility 50ms',
  },
  // 文本内容 默认 style
  [`.${CLASS_NAME.TEXT}`]: {
    'text-align': 'center',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='top']`]: {
    transform: `translate(-50%, -100%)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='left']`]: {
    transform: `translate(-100%, -50%)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='right']`]: {
    transform: `translate(0, -50%)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='bottom']`]: {
    transform: `translate(-50%, 0)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='top-left']`]: {
    transform: `translate(0,-100%)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='top-right']`]: {
    transform: `translate(-100%,-100%)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='left-top']`]: {
    transform: `translate(-100%, 0)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='left-bottom']`]: {
    transform: `translate(-100%, -100%)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='right-top']`]: {
    transform: `translate(0, 0)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='right-bottom']`]: {
    transform: `translate(0, -100%)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='bottom-left']`]: {
    transform: `translate(0, 0)`,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='bottom-right']`]: {
    transform: `translate(-100%, 0)`,
  },
  [`.${CLASS_NAME.ARROW}`]: {
    width: '4px',
    height: '4px',
    transform: 'rotate(45deg)',
    'background-color': 'rgba(0, 0, 0)',
    position: 'absolute',
    'z-index': -1,
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='top']`]: {
    transform: `translate(-50%, calc(-100% - 5px))`,
  },
  [`[data-position='top'] .${CLASS_NAME.ARROW}`]: {
    bottom: '-2px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='left']`]: {
    transform: `translate(calc(-100% - 5px), -50%)`,
  },
  [`[data-position='left'] .${CLASS_NAME.ARROW}`]: {
    right: '-2px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='right']`]: {
    transform: `translate(5px, -50%)`,
  },
  [`[data-position='right'] .${CLASS_NAME.ARROW}`]: {
    left: '-2px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='bottom']`]: {
    transform: `translate(-50%, 5px)`,
  },
  [`[data-position='bottom'] .${CLASS_NAME.ARROW}`]: {
    top: '-2px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='top-left']`]: {
    transform: `translate(0, calc(-100% - 5px))`,
  },
  [`[data-position='top-left'] .${CLASS_NAME.ARROW}`]: {
    left: '10px',
    bottom: '-2px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='top-right']`]: {
    transform: `translate(-100%, calc(-100% - 5px))`,
  },
  [`[data-position='top-right'] .${CLASS_NAME.ARROW}`]: {
    right: '10px',
    bottom: '-2px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='left-top']`]: {
    transform: `translate(calc(-100% - 5px), 0)`,
  },
  [`[data-position='left-top'] .${CLASS_NAME.ARROW}`]: {
    right: '-2px',
    top: '8px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='left-bottom']`]: {
    transform: `translate(calc(-100% - 5px), -100%)`,
  },
  [`[data-position='left-bottom'] .${CLASS_NAME.ARROW}`]: {
    right: '-2px',
    bottom: '8px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='right-top']`]: {
    transform: `translate(5px, 0)`,
  },
  [`[data-position='right-top'] .${CLASS_NAME.ARROW}`]: {
    left: '-2px',
    top: '8px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='right-bottom']`]: {
    transform: `translate(5px, -100%)`,
  },
  [`[data-position='right-bottom'] .${CLASS_NAME.ARROW}`]: {
    left: '-2px',
    bottom: '8px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='bottom-left']`]: {
    transform: `translate(0, 5px)`,
  },
  [`[data-position='bottom-left'] .${CLASS_NAME.ARROW}`]: {
    top: '-2px',
    left: '8px',
  },
  [`.${CLASS_NAME.CONTAINER}[data-position='bottom-right']`]: {
    transform: `translate(-100%, 5px)`,
  },
  [`[data-position='bottom-right'] .${CLASS_NAME.ARROW}`]: {
    top: '-2px',
    right: '8px',
  },
};