import React from 'react';
import {
    ClickAwayListener,
    Fade,
    Paper,
    PopperPlacementType
} from "@mui/material";
import {
    PopoverContent,
    PopoverRoot,
    TopPopupArrow,
    BottomPopupArrow,
    LeftPopupArrow,
    RightPopupArrow,
    PopupPanel
} from './style';

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

export const FilterPopop: React.FC<FilterPopupProps> = ({ className, placement = "top", arrow = true, open, content, onClose, children }) => {
    const [openning, setOpenning] = React.useState<number>(0);
    const [arrowRef, setArrowRef] = React.useState<HTMLElement | null>(null);
    const [childNode, setChildNode] = React.useState<HTMLElement | null>(null);

    React.useEffect(() => {
        if (!!open && !!arrowRef) {
            setOpenning(Date.now() + 1000)
        }
        else setOpenning(0);
    }, [open, arrowRef, setOpenning])

    const handleClose = () => {
        if (!!open && openning > 0) {
            const now = Date.now();
            const canClose = openning < now;

            if (canClose && onClose) {
                setOpenning(0);
                onClose();
            }
        }
    }

    return (
        <>
            {React.cloneElement(children, { ...children.props, ref: setChildNode })}
            <ClickAwayListener onClickAway={handleClose}>
                <PopupPanel
                    open={!!open}
                    anchorEl={childNode}
                    placement={placement}
                    transition
                    className={`${className}`}
                    modifiers={[
                        {
                            name: 'flip',
                            enabled: true,
                            options: {
                                altBoundary: true,
                                rootBoundary: 'viewport',
                                padding: 8,
                            },
                        },
                        {
                            name: 'arrow',
                            enabled: !!arrow,
                            options: {
                                element: arrowRef,
                            },
                        },
                    ]}
                >
                    {({ TransitionProps }) => (
                        <Fade {...TransitionProps} timeout={350}>
                            <Paper>
                                <PopoverRoot style={{ paddingRight: '6px' }} className="MuiPaper-content">
                                    {
                                        arrow
                                            ? placement === 'bottom'
                                                ? <BottomPopupArrow ref={setArrowRef} />
                                                : placement === 'right'
                                                    ? <RightPopupArrow ref={setArrowRef} />
                                                    : placement === 'left'
                                                        ? <LeftPopupArrow ref={setArrowRef} />
                                                        : <TopPopupArrow ref={setArrowRef} />
                                            : null
                                    }
                                    <PopoverContent>{content}</PopoverContent>
                                </PopoverRoot>
                            </Paper>
                        </Fade>
                    )}
                </PopupPanel>
            </ClickAwayListener>
        </>
    );
}