import type { FC } from 'react';
import React, { useState, useRef } from 'react';
import { BsOverlay, BsPopover } from '@theorchard/suite-components';
import cx from 'classnames';

export const CLASS_NAME = 'OverlayTriggerPopover';

// eslint-disable-next-line max-len
type PopperPlacement =
    | 'auto-end'
    | 'auto-start'
    | 'auto'
    | 'bottom-end'
    | 'bottom-start'
    | 'bottom'
    | 'left-end'
    | 'left-start'
    | 'left'
    | 'right-end'
    | 'right-start'
    | 'right'
    | 'top-end'
    | 'top-start'
    | 'top';
// We probably need to create this component on suite-components and when we could use Overlay.Popover.placement type

interface PopoverContentProps {
    closePopover: () => void;
}

export interface Props {
    id: string;
    children: React.ReactNode;
    className?: string;
    popoverClassName?: string;
    PopoverContent: FC<PopoverContentProps>;
    placement?: PopperPlacement;
}
const OverlayTriggerPopover: FC<Props> = ({
    id,
    className,
    popoverClassName,
    PopoverContent,
    children,
    placement,
}) => {
    const targetRef = useRef(null);
    const [isPopoverShown, setIsPopoverShown] = useState<boolean>(false);

    return (
        <div
            className={cx(`${CLASS_NAME}-Wrapper`, className)}
            data-testid={`${CLASS_NAME}-Wrapper`}
            onMouseOver={() => setIsPopoverShown(true)}
            onFocus={() => setIsPopoverShown(true)}
            onMouseLeave={() => setIsPopoverShown(false)}
            onBlur={() => setIsPopoverShown(false)}
            ref={targetRef}
        >
            {children}

            <BsOverlay
                target={targetRef.current}
                show={isPopoverShown}
                rootClose
                placement={placement || 'bottom-start'}
                onHide={() => setIsPopoverShown(false)}
            >
                <BsPopover
                    id={id}
                    className={cx(
                        CLASS_NAME,
                        'contentReview',
                        popoverClassName
                    )}
                    data-testid={CLASS_NAME}
                    style={{ border: 0 }}
                >
                    <PopoverContent
                        closePopover={() => {
                            setIsPopoverShown(false);
                        }}
                    />
                </BsPopover>
            </BsOverlay>
        </div>
    );
};

export default OverlayTriggerPopover;