'use client'

import { GlassButton } from "@/components/glass-button"
import { useRouter } from "next/navigation"
import { LightbulbIcon, LightbulbOffIcon, User2Icon } from "lucide-react"
import { useState } from "react";
import { useMap } from "./map-context";

export default function Toolbar() {
    const router = useRouter();

    const { setOpacity, opacity } = useMap();

    return (
        <div className="flex flex-col gap-6 items-center h-full">
            <GlassButton className="p-2" onClick={
                () => {
                    router.push('/me');
                }
            }>
                <User2Icon className="w-3 h-3" />
            </GlassButton>

            <Opacity initOpacity={opacity.current} setOpacity={setOpacity} />

        </div>
    )
}

function Opacity({ initOpacity, setOpacity }: { initOpacity: number, setOpacity: (opacity: number) => void }) {

    const [opacity, setIOpacity] = useState(initOpacity);

    const handleOpacityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const newOpacity = parseFloat(e.target.value);
        setOpacity(newOpacity);
        setIOpacity(newOpacity);
    };

    return (

        <div className="flex flex-col gap-2 items-center h-full w-full">
            <LightbulbIcon className="w-3 h-3" onClick={() => {
                setOpacity(100);
                setIOpacity(100);
            }} />
            <div
                className="relative bg-black/20 border border-white/10 backdrop-blur-xl rounded-xl shadow-2xl overflow-hidden w-full h-30"
            >
                <input
                    type="range"
                    min="0"
                    max="100"
                    step="1"
                    value={opacity}
                    onChange={handleOpacityChange}
                    className="absolute inset-0 cursor-pointer"
                    style={{
                        width: '120px',
                        height: '100%',
                        left: '50%',
                        top: '50%',
                        transform: 'translate(-50%, -50%) rotate(270deg)',
                        transformOrigin: 'center',
                        background: 'transparent',
                        borderRadius: '12px',
                        WebkitAppearance: 'none',
                        MozAppearance: 'none',
                        appearance: 'none',
                        overflow: 'hidden',
                        transition: 'height 0.1s',
                    }}
                />
                <style>
                    {
                        `
                            input[type="range"]::-webkit-slider-thumb {
                                -webkit-appearance: none;
                                width: 0;
                                height: 0;
                                box-shadow: -200px 0 0 200px #ffffffdd;
                            }
            
                            input[type="range"]::-moz-range-thumb {
                                width: 0;
                                height: 0;
                                border-radius: 0;
                                border: none;
                                box-shadow: -200px 0 0 200px #ffffffdd;
                            }
                            `
                    }

                </style>

            </div>
            <LightbulbOffIcon className="w-3 h-3" onClick={() => {
                setOpacity(0);
                setIOpacity(0);
            }} />
        </div>



    )
}