import React from 'react';
import {OverlayTrigger, OverlayTriggerProps, Popover, Modal} from 'react-bootstrap';

interface PopoversProps extends Omit<OverlayTriggerProps, "overlay" | "onHide" | "children"> {
  children: React.ReactNode,
  title: React.ReactNode,
  component: React.ReactNode,
  containerClassName: string,
  backdrop: boolean,
  onHide?: () => void,
}

const Popovers = (props: PopoversProps) => {
  const {
    children,
    title,
    component,
    containerClassName,
    backdrop: propBackdrop,
    onHide,
    flip = true,
    trigger = "click",
    ...otherProps
  } = props;
  const [open, setOpen] = React.useState(false);
  const backdrop = trigger === "click" && propBackdrop;

  const popover = (
    <Popover>
      {title && (
        <Popover.Header as={"h3"}>{title}</Popover.Header>
      )}
      {component && (
        <Popover.Body>
          {component}
        </Popover.Body>
      )}
    </Popover>
  );

  return (
    <>
      <OverlayTrigger
        show={backdrop ? open : undefined}
        overlay={popover}
        flip={flip}
        trigger={trigger}
        {...otherProps}
      >
        <div
          className={`popovers-container ${containerClassName}`}
          onClick={() => backdrop && setOpen(!open)}
        >
          {children}
        </div>
      </OverlayTrigger>
      {
        backdrop && (
          <Modal
            show={open}
            onHide={() => {
              setOpen(false);
              onHide && onHide();
            }}
            animation={false}
            dialogClassName="popovers-dialog"
            backdropClassName="popovers-backdrop"
          />
        )
      }
    </>
  );
};

export default Popovers;
export {Popovers, PopoversProps}