"use client"

import {
    animate,
    progress as calcProgress,
    clamp,
    mix,
    motion,
    MotionStyle,
    SpringOptions,
    useMotionValue,
    useTransform,
} from "motion/react"
import { useRef } from "react"

export default function Slider({
    maxPull = 20,
    maxSquish = 0.92,
    maxStretch = 1.08,
    keyboardStep = 0.05,
    keyboardSpring = { stiffness: 200, damping: 60 },
}: SliderProps) {
    const ref = useRef<HTMLDivElement>(null)

    /**
     * This iOS slider doesn't snap to the initial position when a drag starts,
     * it applies the drag offset to the initial position. So here we track
     * a couple of values to calculate the drag offset.
     */
    const initialDragY = useRef(0)
    const initialProgressY = useRef(0)

    /**
     * Store the size of the slider y-axis in a ref instead of state, because we
     * never use this information in a React render. Updating this shouldn't trigger
     * a re-render for best animation performance.
     */
    const size = useRef<{ top: number; bottom: number }>({ top: 0, bottom: 0 })

    /**
     * The progress of the slider, normalized between 0 and 1. During the gesture
     * this can exceed 1 or go below 0, and then we animate it back to the closest
     * edge when the gesture ends.
     */
    const progress = useMotionValue(0.5)

    /**
     * The brightness of the slider, which is the progress clamped between 0 and 1.
     */
    const brightness = useTransform(() => clamp(0, 1, progress.get()))

    /**
     * Use useTransform to map the progress to the y-offset of the slider, and
     * then map that y value to squish/squash scale values.
     */
    const y = useTransform(progress, [-1, 0, 1, 2], [maxPull, 0, 0, -maxPull])
    const scaleX = useTransform(
        y,
        [-maxPull, 0, 0, maxPull],
        [maxSquish, 1, 1, maxSquish]
    )
    const scaleY = useTransform(
        y,
        [-maxPull, 0, 0, maxPull],
        [maxStretch, 1, 1, maxStretch]
    )

    /**
     * Invert the container scale values to insure the sun icon
     * maintains the correct aspect ratio.
     */
    const invertScaleX = useTransform(() => invertScale(scaleX.get()))
    const invertScaleY = useTransform(() => invertScale(scaleY.get()))

    const updateProgress = (clientY: number) => {
        const { top, bottom } = size.current
        progress.set(calcProgress(bottom, top, clientY))
    }

    const updateProgressWithKeyboard = (event: KeyboardEvent) => {
        if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return

        let current = clamp(0, 1, progress.get())

        if (current <= 0.04) current = 0
        if (current >= 0.96) current = 1

        const newProgress =
            current + (event.key === "ArrowUp" ? keyboardStep : -keyboardStep)

        if (newProgress > 1) {
            animate(progress, 1, {
                velocity: 20,
                type: "spring",
                ...keyboardSpring,
            })
        } else if (newProgress < 0) {
            animate(progress, 0, {
                velocity: -20,
                type: "spring",
                ...keyboardSpring,
            })
        } else {
            progress.jump(clamp(0, 1, newProgress))
        }
    }

    return (
        <div style={container}>
            <motion.div
                ref={ref}
                style={{ ...slider, y, scaleX, scaleY }}
                onTapStart={({ clientY }: PointerEvent) => {
                    if (!ref.current) return

                    const { top, bottom } = ref.current.getBoundingClientRect()
                    size.current = { top, bottom }

                    initialDragY.current = clientY
                    initialProgressY.current = mix(bottom, top, progress.get())
                }}
                onPan={({ clientY }) => {
                    const dragOffset = clientY - initialDragY.current
                    const newProgressY = initialProgressY.current + dragOffset
                    updateProgress(newProgressY)
                }}
                onPanEnd={() => {
                    /**
                     * If the slider ended outside of the normal range,
                     * animate it back to the closest edge.
                     */
                    const finalProgress = progress.get()
                    if (finalProgress < 0) {
                        animate(progress, 0)
                    } else if (finalProgress > 1) {
                        animate(progress, 1)
                    }
                }}
                /**
                 * Keyboard accessibility
                 */
                onFocus={() => {
                    document.addEventListener(
                        "keydown",
                        updateProgressWithKeyboard
                    )
                }}
                onBlur={() => {
                    document.removeEventListener(
                        "keydown",
                        updateProgressWithKeyboard
                    )
                }}
                transition={{ duration: 0.15 }}
                initial={{
                    boxShadow: "0px 0px 0px 4px #0d63f800",
                }}
                whileFocus={{
                    boxShadow: "0px 0px 0px 4px #0d63f8ff",
                }}
            >
                <motion.div style={{ ...indicator, scaleY: brightness }} />
                <motion.div
                    style={{ scaleX: invertScaleX, scaleY: invertScaleY }}
                >
                    <SunIcon />
                </motion.div>
            </motion.div>
        </div>
    )
}

/**
 * ==============   Styles   ================
 */

const container: React.CSSProperties = {
    width: 400,
    height: 300,
    overflow: "hidden",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    backdropFilter: "blur(2px)",
}

const slider: MotionStyle = {
    width: 100,
    height: 225,
    backgroundColor: "rgba(255,255,255,0.1)",
    borderRadius: 40,
    overflow: "hidden",
    position: "relative",
    display: "flex",
    alignItems: "flex-end",
    justifyContent: "center",
    touchAction: "none",
    outline: "none",
}

const indicator: MotionStyle = {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: "#f5f5f5",
    originY: 1,
    pointerEvents: "none",
}

const icon: React.CSSProperties = {
    position: "relative",
    zIndex: 1,
    bottom: 20,
    pointerEvents: "none",
}

/**
 * ==============   Components   ================
 */

function SunIcon() {
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="40"
            height="40"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#101417"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            style={icon}
        >
            <circle cx="12" cy="12" r="4" stroke="#101417" fill="#101417" />
            <path d="M12 3v1" />
            <path d="M12 20v1" />
            <path d="M3 12h1" />
            <path d="M20 12h1" />
            <path d="m18.364 5.636-.707.707" />
            <path d="m6.343 17.657-.707.707" />
            <path d="m5.636 5.636.707.707" />
            <path d="m17.657 17.657.707.707" />
        </svg>
    )
}

/**
 * ==============   Utils   ================
 */
function invertScale(scale: number) {
    return 1 / scale
}

/**
 * ==============   Types   ================
 */

type SliderProps = {
    maxPull?: number
    maxSquish?: number
    maxStretch?: number
    keyboardStep?: number
    keyboardSpring?: SpringOptions
}