"use client"

import * as RadioGroup from "@radix-ui/react-radio-group"
import {
    AnimatePresence,
    motion,
    useMotionValue,
    useTransform,
} from "motion/react"
import { useState } from "react"

function RadixRadioGroup() {
    const [value, setValue] = useState("default")
    const scale = useMotionValue(1)
    const borderWidth = useTransform(scale, [0.95, 1.05], [3, 1.5])

    return (
        <>
            <RadioGroup.Root
                className="root"
                value={value}
                onValueChange={setValue}
            >
                {["default", "comfortable", "compact"].map((size) => (
                    <div className="item-wrapper" key={size}>
                        <RadioGroup.Item
                            className="radio-item"
                            value={size}
                            id={size}
                            asChild
                        >
                            <motion.button
                                style={{ scale, willChange: "transform" }}
                                whileHover={{ scale: 1.05 }}
                                whileTap={{ scale: 0.95 }}
                            >
                                <AnimatePresence>
                                    {value === size && (
                                        <RadioGroup.Indicator
                                            asChild
                                            forceMount
                                        >
                                            <div className="indicator">
                                                <motion.div
                                                    className="border"
                                                    style={{ borderWidth }}
                                                    initial={false}
                                                    animate={{
                                                        borderColor: "#ffff",
                                                        scale: 1,
                                                    }}
                                                    exit={{
                                                        borderColor: "#fff0",
                                                        scale: 0.95,
                                                    }}
                                                    transition={{
                                                        duration: 0.2,
                                                        ease: "easeOut",
                                                    }}
                                                />
                                                <motion.div
                                                    className="dot"
                                                    initial={{ scale: 0 }}
                                                    animate={{
                                                        scale: 1,
                                                        opacity: 1,
                                                    }}
                                                    exit={{
                                                        scale: 0,
                                                        opacity: 0,
                                                    }}
                                                    transition={{
                                                        type: "spring",
                                                        stiffness: 400,
                                                        damping: 25,
                                                    }}
                                                />
                                            </div>
                                        </RadioGroup.Indicator>
                                    )}
                                </AnimatePresence>
                            </motion.button>
                        </RadioGroup.Item>
                        <label className="label" htmlFor={size}>
                            {size.charAt(0).toUpperCase() + size.slice(1)}
                        </label>
                    </div>
                ))}
            </RadioGroup.Root>

            <StyleSheet />
        </>
    )
}

/**
 * ==============   Styles   ================
 */
function StyleSheet() {
    return (
        <style>{`
            .root {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .item-wrapper {
                display: flex;
                align-items: center;
            }
            .radio-item {
                background-color: #0b1011;
                border: 1px solid #1d2628;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                outline: none;
                cursor: pointer;
            }
            .indicator {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                position: relative;
            }
            .border {
                position: absolute;
                inset: 0;
                border-radius: 50%;
                border-style: solid;
            }
            .dot {
                width: 11px;
                height: 11px;
                border-radius: 50%;
                background-color: #ff0088;
            }
            .label {
                color: #f5f5f5;
                padding-left: 15px;
                font-size: 18px;
                line-height: 1;
                cursor: pointer;
            }
        `}</style>
    )
}

export default RadixRadioGroup