import React from 'react';
import {
    ClickAwayListener,
    Fade,
    Paper,
    PopperPlacementType
} from "@mui/material";
import {
    PopoverContent,
    PopoverRoot,
    TopTooltipArrow,
    BottomTooltipArrow,
    LeftTooltipArrow,
    RightTooltipArrow,
    TooltipPanel
} from './styled.panel';

interface Props {
    flip?: boolean,
    preventOverflow?: boolean,
    className?: string;
    content: React.ReactElement;
    children: React.ReactElement;
    open: boolean;
    onClose?: () => void;
    arrow?: boolean;
    placement?: PopperPlacementType;
}

export const RichTooltip: React.FC<Props> = ({
    className,
    placement = "top",
    flip = true,
    preventOverflow = true,
    arrow = true,
    open,
    onClose = () => { },
    content,
    children
}) => {
    const [arrowRef, setArrowRef] = React.useState<HTMLElement | null>(null);
    const [childNode, setChildNode] = React.useState<HTMLElement | null>(null);

    return (
        <div>
            {React.cloneElement(children, { ...children.props, ref: setChildNode })}
            <TooltipPanel
                open={!!open}
                anchorEl={childNode}
                placement={placement}
                transition
                className={`${className}`}
                modifiers={[
                    flip &&
                    {
                        name: 'flip',
                        enabled: true,
                        options: {
                            altBoundary: true,
                            rootBoundary: 'document',
                            padding: 8,
                        },
                    },
                    preventOverflow &&
                    {
                        name: 'preventOverflow',
                        enabled: true,
                        options: {
                            altAxis: true,
                            altBoundary: true,
                            tether: true,
                            rootBoundary: 'document',
                            padding: 8,
                        },
                    },
                    {
                        name: 'arrow',
                        enabled: !!arrow,
                        options: {
                            element: arrowRef,
                        },
                    },
                ].filter(x => x) as any}>
                    
                {({ TransitionProps }) => (
                    <Fade {...TransitionProps} timeout={350}>
                        <Paper>
                            <ClickAwayListener onClickAway={onClose}>
                                <PopoverRoot className="MuiPaper-content">
                                    {
                                        arrow
                                            ? placement === 'bottom'
                                                ? <BottomTooltipArrow ref={setArrowRef} />
                                                : placement === 'right'
                                                    ? <RightTooltipArrow ref={setArrowRef} />
                                                    : placement === 'left'
                                                        ? <LeftTooltipArrow ref={setArrowRef} />
                                                        : <TopTooltipArrow ref={setArrowRef} />
                                            : null
                                    }
                                    <PopoverContent>{content}</PopoverContent>
                                </PopoverRoot>
                            </ClickAwayListener>
                        </Paper>
                    </Fade>
                )}
            </TooltipPanel>
        </div>
    );
}