"use client"

import { animate, motion, useMotionValue, useTransform } from "motion/react"

export default function HoldToConfirm() {
    const progress = useMotionValue(0)

    const circleStrokeWidth = useTransform(progress, [0, 1], [0, 20])
    const circleRotation = useTransform(progress, [0, 1], ["-90deg", "-90deg"])
    const circleColor = useTransform(progress, [0, 1], ["#ffffff", "#8df0cc"])

    const buttonScale = useTransform(progress, [0, 1], [1, 0.85])
    const buttonProgressX = useTransform(progress, [0, 1], ["-200%", "0%"])

    return (
        <div style={styles.container}>
            <div style={styles.buttonWrapper}>
                <motion.button
                    style={{ ...styles.button, scale: buttonScale }}
                    onPointerDown={(e) => {
                        // Prevent default to disable text selection
                        progress.set(0)
                        animate(progress, 1, {
                            duration: 2,
                            ease: "easeOut",
                        })
                    }}
                    onPointerUp={() => {
                        animate(progress, 0, { duration: 0.3 })
                    }}
                    onPointerLeave={() => {
                        animate(progress, 0, { duration: 0.3 })
                    }}
                >
                    <motion.div
                        style={{
                            ...styles.buttonBackground,
                            x: buttonProgressX,
                        }}
                    />
                    <span style={{ pointerEvents: "none" }}>
                        Hold to confirm
                    </span>
                </motion.button>

                <motion.svg
                    style={styles.progressRing}
                    width="320"
                    height="320"
                    viewBox="0 0 320 320"
                >
                    <motion.circle
                        cx="160"
                        cy="160"
                        r="120"
                        fill="none"
                        stroke="var(--white-feint)"
                        strokeWidth="24"
                        strokeLinecap="round"
                        style={{
                            rotate: circleRotation,
                            transformOrigin: "center",
                            opacity: progress,
                            strokeWidth: circleStrokeWidth,
                            stroke: circleColor,
                            pathLength: progress,
                        }}
                    />
                </motion.svg>
            </div>
        </div>
    )
}

/**
 * ==============   Styles   ================
 */
type Styles = {
    [K: string]: React.CSSProperties | Styles
}
const styles = {
    container: {
        display: "flex",
        flexDirection: "column",
        gap: 16,
        alignItems: "center",
        justifyContent: "center",
        padding: 16,
        height: 80,
    },
    buttonWrapper: {
        position: "relative",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    },
    progressRing: {
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        pointerEvents: "none",
    },
    button: {
        color: "#0f1115",
        backgroundColor: "#f5f5f5",
        borderRadius: 999,
        padding: "12px 20px",
        position: "relative",
        isolation: "isolate",
        overflow: "hidden",
        userSelect: "none",
        WebkitUserSelect: "none",
        WebkitTouchCallout: "none",
        WebkitTapHighlightColor: "transparent",
    },
    buttonBackground: {
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        backgroundColor: "var(--green)",
        borderRadius: 999,
        zIndex: -1,
        filter: "blur(20px)",
        scale: 2,
    },
} as const satisfies Styles