import * as React from 'react';
import styled from 'styled-components';

import { Colors, Sizes, TextHelper, Icons } from '../index';
import { styledByMediaQuery } from '../utils/styles';

const Box = styled.div`
  position: relative;
  margin-left: ${Sizes.s4}px;
`;

const Info = styled.div`
  cursor: pointer;
  &:hover + .tooltip {
    opacity: 1;
    z-index: 1
  }
`;

const Tooltip = styled.div.attrs({
  className: 'tooltip',
})`
  opacity: 0;
  background-color: ${ Colors.regalBlue};
  color: ${ Colors.white };
  border-radius: 4px;
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: -13px;
  transition: all 0.3s ease-in;
  filter: drop-shadow(0 2px 2px rgb(146, 146, 146));
  padding: 16px;
  max-width: 266px;
  width: 266px;
  z-index: -1;
  line-height: 24px;
  font-family: ${TextHelper.fontVariant('regular')};
  display: none;

  ${styledByMediaQuery(`display: block;`)}

  &:before {
    content: '';
    position: inherit;
    left: -13px;
    bottom: 15px;
    border-top: 5px solid transparent;
    border-right: 13px solid ${ Colors.regalBlue};
    border-bottom: 9px solid transparent;
  }
`;

export default ({ children }: { children: React.ReactNode|React.ReactChild|string }) => (
  <Box>
    <Info><Icons.Info /></Info>
    <Tooltip>{children}</Tooltip>
  </Box>
);