/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import * as React from 'react';

// @ts-ignore
import COLORS from '../../constants/colors';

import { CircleIconAtom, TextAtom, IconAtom } from '../../atoms';

interface IProps {
  className?: any;
  css?: any;
  title?: any;
  info?: any;
  iconName?: any;
  tooltip?: string;
}

const tooltipWrapper = css`
  width: auto;
  height: auto;
  margin: 0 0 0 15px;

  ~ .tooltipBox {
    display: none;
  }

  &:hover {
    .tooltipIcon {
      color: #645aff;
    }

    ~ .tooltipBox {
      display: block;
    }
  }
`;

const iconStyle = css`
  color: #b8c2cc;
  cursor: pointer;
`;

const tooltipBoxStyle = css`
  position: absolute;
  right: 0;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 180px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

  span {
    font-size: 12px;
    line-height: 1.2rem;
  }
`;

class WidgetOverviewCardMolecule extends React.PureComponent<IProps, any> {
  public state = {};

  public render() {
    const { className = '', tooltip } = this.props;

    return (
      <div className={`${className} flex`} css={[this.props.css]}>
        <CircleIconAtom
          typeCircle="DEFAULT"
          iconName={this.props.iconName}
          iconType="LIGHT"
          iconSize="2x"
        />
        <div className="flex flex-column self-center ml3">
          <div
            className="relative flex justify-start items-center"
            css={css`
              margin: 0 0 12px 0;
            `}
          >
            <TextAtom
              css={css`
                font-size: 16px;
                color: ${COLORS.GREY.DARK};
              `}
            >
              {this.props.title}
            </TextAtom>
            {tooltip && (
              <React.Fragment>
                <div role="button" css={tooltipWrapper}>
                  <IconAtom type="REGULAR" name="info-circle" className="tooltipIcon" css={iconStyle} />
                </div>
                <div className="tooltipBox" css={tooltipBoxStyle}>
                  <span>{tooltip}</span>
                </div>
              </React.Fragment>
            )}
          </div>
          <TextAtom
            css={css`
              height: 32px;
              font-size: 32px !important;
              font-weight: 600;
              font-style: normal;
              font-stretch: normal;
              line-height: 1;
              letter-spacing: normal;
              text-align: left;
              color: ${COLORS.GREY.DARK};
            `}
          >
            {this.props.info}
          </TextAtom>
        </div>
      </div>
    );
  }
}

export { WidgetOverviewCardMolecule };