import React from 'react';
import { string, bool, func, node } from 'prop-types';
import styled from 'styled-components';
import {
  REM_UNIT_MD,
  REM_UNIT_LG,
  REM_FONT_SIZE_SM,
  FONT_BOLD,
  SUNSET_ORANGE,
  ARSENIC,
  VERY_LIGHT_TANGELO,
  WHITE,
} from '@vincent_za/styles';

// TODO: removed relative for now. cannot have a generic tooltip wrap baked into modals as the relative causes the cog to not be abs left 100%
const TooltipInnerWrap = styled.div`
  ${props => props.isRelative && 'position: relative'};
  &:hover {
    z-index: 1
  };
`;

const Tooltip = styled.div`
  ${props => (props.isHidden || props.isTouchDevice) && 'display: none'};
  visibility: hidden;
  position: absolute;
  padding: 1rem ${REM_UNIT_LG};
  line-height: 1.1;
  font-size: ${REM_FONT_SIZE_SM};
  font-family: ${FONT_BOLD};
  text-transform: uppercase;
  background-color: ${ARSENIC};
  color: #D4D9D1;
  ${props => props.isErrorVariant && `
    background-color: ${props.variantColor};
    color: ${WHITE};
  `};
  ${props => props.isInfoVariant && `
    background-color: ${props.variantColor};
    color: ${WHITE};
  `};
  border-radius: 2px;
  white-space: nowrap;

  &::before {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
  };

  ${props => props.position === 'top' && `
    bottom: 100%;
    left: 50%;
    border-bottom: 2px solid ${props.variantColor};
    margin-bottom: ${REM_UNIT_MD};
    transform: translateX(-50%);
  `};

  ${props => props.position === 'right' && `
    left: 100%;
    top: 50%;
    border-left: 2px solid ${props.variantColor};
    margin-left: ${REM_UNIT_MD};
    transform: translateY(-50%);

    &::before {
      top: 50%;
      right: 100%;
      border-width: 6px 6px 6px 0;
      border-color: transparent ${props.variantColor} transparent transparent;
      transform: translateY(-50%);
    };
  `};

  ${props => props.position === 'bottom' && `
    top: 100%;
    left: 50%;
    border-top: 2px solid ${props.variantColor};
    margin-top: ${REM_UNIT_MD};
    transform: translateX(-50%);

    &::before {
      bottom: 100%;
      left: 50%;
      border-width: 0 6px 6px 6px;
      border-color: transparent transparent ${props.variantColor} transparent;
      transform: translateX(-50%);
    };
  `};

  ${props => props.position === 'left' && `
    right: 100%;
    top: 50%;
    border-right: 2px solid ${props.variantColor};
    margin-right: ${REM_UNIT_MD};
    transform: translateY(-50%);

    &::before {
      top: 50%;
      left: 100%;
      border-width: 6px 0 6px 6px;
      border-color: transparent transparent transparent ${props.variantColor};
      transform: translateY(-50%);
    };
  `};

  ${TooltipInnerWrap}:hover & {
    ${props => !props.isDisabled && !props.isHidden && `
      visibility: visible;
      transition: margin 0.2s ease-out, visibility 0.4s ease-out;
      transition-delay: 0.4s;
    `}
    ${props => props.position === 'top' && `margin-bottom: ${REM_UNIT_LG};`}
    ${props => props.position === 'right' && `margin-left: ${REM_UNIT_LG};`}
    ${props => props.position === 'bottom' && `margin-top: ${REM_UNIT_LG};`}
    ${props => props.position === 'left' && `margin-right: ${REM_UNIT_LG};`}
  };
`;

class TooltipWrap extends React.PureComponent {
  render() {
    const {
      isTouchDevice,
      isInfoVariant,
      isErrorVariant,
      isDisabled,
      isRelative,
      position,
      tooltip,
      children,
      className,
      onClick,
    } = this.props;

    return (
      <TooltipInnerWrap isRelative={isRelative} className={className} onClick={onClick}>
        {children}
        <Tooltip
          isTouchDevice={isTouchDevice}
          isErrorVariant={isErrorVariant}
          isInfoVariant={!isErrorVariant && isInfoVariant}
          isHidden={!tooltip}
          isDisabled={isDisabled}
          variantColor={isErrorVariant ? SUNSET_ORANGE : isInfoVariant ? VERY_LIGHT_TANGELO : '#ADCCC8'}
          position={position}
        >
          {tooltip}
        </Tooltip>
      </TooltipInnerWrap>
    );
  }
}

TooltipWrap.propTypes = {
  isTouchDevice: bool.isRequired,
  isInfoVariant: bool,
  isErrorVariant: bool,
  isDisabled: bool,
  isRelative: bool,
  position: string.isRequired,
  tooltip: string,
  children: node.isRequired,
  onClick: func,
  className: string,
};

TooltipWrap.defaultProps = {
  isInfoVariant: false,
  isErrorVariant: false,
  isDisabled: false,
  isRelative: false,
  tooltip: undefined,
  onClick() {},
  className: undefined,
};

export default TooltipWrap;
