"use client"

import { Radio } from "@base-ui-components/react/radio"
import { RadioGroup } from "@base-ui-components/react/radio-group"
import {
    AnimatePresence,
    motion,
    useMotionValue,
    useTransform,
} from "motion/react"
import { useState } from "react"

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

    return (
        <>
            <RadioGroup
                className="root"
                value={value}
                onValueChange={(newValue) => setValue(newValue as string)}
            >
                {["default", "comfortable", "compact"].map((size) => (
                    <div className="item-wrapper" key={size}>
                        <Radio.Root
                            className="radio-item"
                            value={size}
                            id={size}
                            render={
                                <motion.button
                                    style={{ scale, willChange: "transform" }}
                                    whileHover={{ scale: 1.05 }}
                                    whileTap={{ scale: 0.95 }}
                                >
                                    <AnimatePresence>
                                        {value === size && (
                                            <Radio.Indicator 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,
                                                    }}
                                                />
                                            </Radio.Indicator>
                                        )}
                                    </AnimatePresence>
                                </motion.button>
                            }
                        />
                        <label htmlFor={size} className="label">
                            {size.charAt(0).toUpperCase() + size.slice(1)}
                        </label>
                    </div>
                ))}
            </RadioGroup>
            <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: #8df0cc;
            }
            .label {
                color: #f5f5f5;
                padding-left: 15px;
                font-size: 18px;
                line-height: 1;
                cursor: pointer;
            }
        `}</style>
    )
}

export default BaseRadio