import React, { Component } from "react";
import PropTypes from "prop-types";
import { Button, Popover, OverlayTrigger } from "react-bootstrap";

const popover = (title: any, content: any) => (
  <Popover id="popover-basic">
    <Popover.Title as="h3">{title}</Popover.Title>
    <Popover.Content>{content}</Popover.Content>
  </Popover>
);

export default class EfePopover extends Component<any, any> {
  /* Props
   * ------------------------------------------------
   *   @prop { boolean }   buttonText                 - Optional. Text on button.
   *   @prop { string  }   classes                    - Optional. String value added to the classes.
   *   @prop { string  }   content                    - Optional. Popover's content post.
   *   @prop { string  }   placement                  - Optional. Popover is selected in which position.
   *   @prop { boolean }   title                      - Optional. Popover's title.
   *   @prop { string  }   trigger                    - Optional. In which trigger Popover is displayed, it is selected. Default Value: hover.Defined Values:hover, click, focus
   *   @prop { boolean }   variant                    - Optional. Button's color.
   */

  /* PropTypes
   * ---------------------------------------------- */
  static propTypes = {
    buttonText: PropTypes.string,
    classes: PropTypes.string,
    content: PropTypes.string,
    placement: PropTypes.string,
    title: PropTypes.string,
    trigger: PropTypes.string,
    variant: PropTypes.string,
  };

  /* Life Cycle Functions
   * ------------------------------------------------ */

  render() {
    const {
      buttonText,
      classes,
      content,
      placement,
      title,
      trigger,
      variant,
    } = this.props;
    return (
      <OverlayTrigger
        trigger={trigger || "hover"}
        placement={placement}
        overlay={popover(title, content)}
        delay={{ show: 250, hide: 400 }}
      >
        <Button variant={variant} className={classes}>
          {buttonText}
        </Button>
      </OverlayTrigger>
    );
  }
}
