import * as React from 'react';

/**
 * The possible options for location are: top, right, left and bottom
 * x and y are offsets in the corresponding direction
 * header is the header value of the popover
 * body is the body of the popover
 */
export interface MmuiTooltipComponentProps {
  x: number;
  y: number;
  header: string;
  body: string;
  location?: string;
}

/**
 * Tooltip Component
 * Add a tooltip within our React Components.
 */
export class MmuiTooltipComponent extends React.Component<MmuiTooltipComponentProps> {
  constructor(props) {
    super(props);
  }

  render() {
    const classArray = ['popover', 'mmui-popover', 'position-absolute'];

    if (this.props.location) {
      classArray.push(`bs-popover-${this.props.location}`);
    } else {
      classArray.push('bs-popover-top');
    }

    const styleObj = {
      left: `${this.props.x}px`,
      top: `${this.props.y}px`,
    };

    if (this.props.body) {
      return (
        <div className={classArray.join(' ')} role="tooltip" style={styleObj}>
          <div className="arrow" />
          <h3 className="popover-header">{this.props.header}</h3>
          <div className="popover-body">{this.props.body}</div>
        </div>
      );
    }

    return;
  }
}