import { router, usePage } from "@inertiajs/react";
import type { PageProps } from "@inertiajs/core";
import { Globe2 } from "lucide-react";

import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { useI18n } from "@/lib/i18n";

type Language = {
    code: string;
    name: string;
    native_name?: string | null;
};

type Shared = PageProps & {
    languages?: Language[];
    locale?: string;
};

export default function PublicLanguageSwitcher() {
    const { languages = [], locale = "en" } = usePage<Shared>().props;
    const { t } = useI18n();

    if (languages.length < 2) {
        return null;
    }

    const changeLocale = (nextLocale: string) => {
        if (nextLocale === locale) {
            return;
        }

        router.post(
            "/language",
            { locale: nextLocale },
            {
                preserveScroll: true,
                preserveState: false,
            },
        );
    };

    return (
        <Select value={locale} onValueChange={changeLocale}>
            <SelectTrigger
                aria-label={t("settings.choose_language", "Choose language")}
                className="w-[128px] max-w-full sm:w-[190px]"
            >
                <span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
                    <Globe2 className="size-4 shrink-0 text-muted-foreground" />
                    <SelectValue className="min-w-0 truncate" />
                </span>
            </SelectTrigger>

            <SelectContent className="min-w-[190px]">
                {languages.map((language) => (
                    <SelectItem key={language.code} value={language.code}>
                        {language.native_name || language.name}
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>
    );
}