"use client"

import { Dialog } from "@base-ui-components/react/dialog"
import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"

function BaseDialog() {
    const [open, setOpen] = useState(false)

    return (
        <div className="container">
            <Dialog.Root open={open} onOpenChange={setOpen}>
                <Dialog.Trigger
                    render={
                        <motion.button
                            className="openButton"
                            whileHover={{ scale: 1.1 }}
                            whileTap={{ scale: 1.05 }}
                            data-primary-action
                        >
                            Open Dialog
                        </motion.button>
                    }
                />

                <AnimatePresence>
                    {open && (
                        <Dialog.Portal keepMounted>
                            <Dialog.Backdrop
                                render={
                                    <motion.div
                                        className="overlay"
                                        initial={{ opacity: 0 }}
                                        animate={{ opacity: 1 }}
                                        exit={{ opacity: 0 }}
                                        transition={{ duration: 0.2 }}
                                    />
                                }
                            />
                            <Dialog.Popup
                                render={
                                    <div className="modal-container">
                                        <motion.div
                                            className="modal"
                                            initial={{
                                                opacity: 0,
                                                filter: "blur(10px)",
                                                z: -100,
                                                rotateY: 25,
                                                rotateX: 5,
                                                transformPerspective: 500,
                                            }}
                                            animate={{
                                                opacity: 1,
                                                filter: "blur(0px)",
                                                rotateX: 0,
                                                rotateY: 0,
                                                z: 0,
                                                transition: {
                                                    delay: 0.2,
                                                    duration: 0.5,
                                                    ease: [0.17, 0.67, 0.51, 1],
                                                    opacity: {
                                                        delay: 0.2,
                                                        duration: 0.5,
                                                        ease: "easeOut",
                                                    },
                                                },
                                            }}
                                            exit={{
                                                opacity: 0,
                                                filter: "blur(10px)",
                                                z: -100,
                                                rotateY: 25,
                                                rotateX: 5,
                                                transformPerspective: 500,
                                                transition: {
                                                    duration: 0.3,
                                                    ease: [
                                                        0.67, 0.17, 0.62, 0.64,
                                                    ],
                                                },
                                            }}
                                            style={{
                                                transformPerspective: 500,
                                            }}
                                        >
                                            <Dialog.Title className="title">
                                                Confirm
                                            </Dialog.Title>
                                            <Dialog.Description>
                                                Are you sure you want to become
                                                a Motion expert?
                                            </Dialog.Description>
                                            <div className="controls">
                                                <Dialog.Close
                                                    render={
                                                        <motion.button
                                                            className="cancel"
                                                            whileHover={{
                                                                scale: 1.05,
                                                            }}
                                                            whileTap={{
                                                                scale: 0.95,
                                                            }}
                                                        >
                                                            Cancel
                                                        </motion.button>
                                                    }
                                                />
                                                <motion.button
                                                    className="save"
                                                    whileHover={{ scale: 1.05 }}
                                                    whileTap={{ scale: 0.95 }}
                                                    onClick={() =>
                                                        setOpen(false)
                                                    }
                                                    data-primary-action
                                                >
                                                    Expert me
                                                </motion.button>
                                            </div>
                                        </motion.div>
                                    </div>
                                }
                            />
                        </Dialog.Portal>
                    )}
                </AnimatePresence>
            </Dialog.Root>
            <StyleSheet />
        </div>
    )
}

/**
 * ==============   Styles   ================
 */
function StyleSheet() {
    return (
        <style>{`
            .container {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 200px;
            }

            .openButton, .controls button {
                background-color: #ff0088;
                color: #f5f5f5;
                font-size: 16px;
                padding: 10px 20px;
                border-radius: 10px;
            }

            .controls {
                border-top: 1px solid var(--divider);
                padding-top: 20px;
                margin-top: 20px;
                display: flex;
                justify-content: flex-end;
                gap: 10px;
            }

            .controls button.cancel {
                background-color: var(--divider);
            }

            .modal {
                border-radius: 10px;
                border: 1px solid #1d2628;
                background-color: #0b1011;
                z-index: 10000000;
                padding: 20px;
                min-width: 300px;
                pointer-events: auto;
            }

            .title {
                font-size: 24px;
                margin: 0 0 20px;
            }

            .overlay {
                background: rgba(0, 0, 0, 0.5);
                position: fixed;
                inset: 0;
                z-index: 9999998;
                backdrop-filter: blur(3px);
            }

            .modal-container {
                position: fixed;
                inset: 0;
                z-index: 9999999;
                display: flex;
                align-items: center;
                justify-content: center;
                pointer-events: none !important;
            }
        `}</style>
    )
}

export default BaseDialog