import React, {FC, ReactNode} from "react";
import {createPortal} from "react-dom";
import {AnimatePresence, motion} from "motion/react";
import {Button} from "./tree/cards/Button";
import {__} from "./globals";

const SPRING = {type: 'spring', stiffness: 380, damping: 17, mass: 0.4} as const;
const BACKDROP_TRANSITION = {duration: 0.24, ease: [0.22, 1, 0.36, 1]} as const;

export type TargetedConfirmDialogProps = {
    isOpen: boolean,
    title: ReactNode,
    description?: ReactNode,
    confirmLabel?: ReactNode,
    cancelLabel?: ReactNode,
    onConfirm: () => void,
    onCancel: () => void,
    originRect?: DOMRect | null,
    zIndex?: number,
}

export const TargetedConfirmDialog: FC<TargetedConfirmDialogProps> = ({
    isOpen,
    title,
    description,
    confirmLabel = __('Yes'),
    cancelLabel = __('No'),
    onConfirm,
    onCancel,
    originRect,
    zIndex = 999998,
}) => {
    if (typeof document === 'undefined') {
        return null;
    }

    const viewportCenterX = typeof window !== 'undefined' ? window.innerWidth / 2 : 0;
    const viewportCenterY = typeof window !== 'undefined' ? window.innerHeight / 2 : 0;
    const sourceCenter = originRect ? {
        x: originRect.left + originRect.width / 2,
        y: originRect.top + originRect.height / 2,
    } : {
        x: viewportCenterX,
        y: viewportCenterY,
    };
    const offsetX = sourceCenter.x - viewportCenterX;
    const offsetY = sourceCenter.y - viewportCenterY;

    return createPortal(
        <AnimatePresence>
            {isOpen && (
                <motion.div className="fixed inset-0" style={{zIndex}} initial={false}>
                    <motion.div
                        className="absolute inset-0"
                        style={{backgroundColor: 'rgba(0,0,0,0.22)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)'}}
                        initial={{opacity: 0}}
                        animate={{opacity: 1}}
                        exit={{opacity: 0}}
                        transition={BACKDROP_TRANSITION}
                        onClick={onCancel}
                    />
                    <div className="absolute inset-0 overflow-y-auto overflow-x-hidden" onClick={onCancel}>
                        <div className="min-h-full flex items-center justify-center p-4 pt-10 pb-8 pointer-events-none">
                            <motion.div
                                className="pointer-events-auto relative w-full max-w-[18rem] rounded-[26px] border-px border-gray-750/40 bg-gray-800 bg-opacity-[.55] shadow-[0_24px_80px_-30px_rgba(27,31,35,0.8)]"
                                style={{backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)'}}
                                initial={{x: offsetX, y: offsetY, scale: 0.35, opacity: 0, borderRadius: 28}}
                                animate={{x: 0, y: 0, scale: 1, opacity: 1, borderRadius: 28}}
                                exit={{x: offsetX, y: offsetY, scale: 0.35, opacity: 0, borderRadius: 28}}
                                transition={SPRING}
                                onClick={(event) => event.stopPropagation()}
                            >
                                <div className="p-5 sm:p-6 min-h-[14rem] flex flex-col gap-8">
                                    <div className="space-y-1">
                                        <h3 className="text-3x leading-[1.2] text-gray-100" style={{textWrap: 'auto'}}>{title}</h3>
                                        {description && <p className="text-smaller-1 leading-4 text-gray-250">{description}</p>}
                                    </div>
                                    <div className="mt-auto flex flex-col gap-2">
                                        <Button preset="blue" size="medium" onClick={onConfirm}>
                                            {confirmLabel}
                                        </Button>
                                        <Button preset="gray-lighter" size="medium" onClick={onCancel}>
                                            {cancelLabel}
                                        </Button>
                                    </div>
                                </div>
                            </motion.div>
                        </div>
                    </div>
                </motion.div>
            )}
        </AnimatePresence>,
        document.body
    );
}