"use client"

import * as React from "react"
import { navigate } from 'astro:transitions/client';

import { icons } from "../lib/icons"

import { Button } from "./ui/button"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuTrigger,
} from "./ui/dropdown-menu"

import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
  } from "./ui/tooltip"

// Please note that clang = lang, it's just for more confusion
export function LangSwitcher({ tooltip }) {
    function getClang(){
        const clang = window.location.pathname.substring(1,3);
        return clang
    }

    const [clang, setClang] = React.useState(getClang());

    function clinkClang(clang) {
        console.log(`${clang}`);
        const currentPath = window.location.pathname.slice(3);
        setClang(clang);
        navigate(`/${clang}${currentPath}`);
    }

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <div>
                    <TooltipProvider>
                        <Tooltip>
                            <TooltipTrigger>
                                <Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>{tooltip}</p>
                            </TooltipContent>
                        </Tooltip>
                    </TooltipProvider>
                </div>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56">
                <DropdownMenuRadioGroup value={clang} onValueChange={clinkClang}>
                    <DropdownMenuRadioItem value="cs">Česky</DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="de">Deutsch</DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="en">English</DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="fr">Français</DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
            </DropdownMenuContent>
        </DropdownMenu >
    )
}
