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

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

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

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

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

    if (languages.length < 2) return null;

    const collapsed = state === "collapsed" && !isMobile;

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

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

    return (
        <div className={collapsed ? "flex justify-center" : "w-full"}>
            <Select value={locale} onValueChange={changeLocale}>
                <SelectTrigger
                    aria-label={t(
                        "settings.choose_language",
                        "Choose language",
                    )}
                    className={
                        collapsed
                            ? "size-8 w-8 justify-center rounded-md border-0 bg-transparent p-0 shadow-none [&>svg:last-child]:hidden"
                            : "w-full border-border bg-background/60"
                    }
                >
                    {collapsed ? (
                        <Globe2 className="size-4 text-muted-foreground" />
                    ) : (
                        <>
                            <div className="flex min-w-0 items-center gap-2">
                                <Globe2 className="size-4 shrink-0 text-muted-foreground" />
                                <SelectValue />
                            </div>
                        </>
                    )}
                </SelectTrigger>

                <SelectContent
                    side={collapsed ? "right" : "bottom"}
                    align={collapsed ? "end" : "start"}
                    sideOffset={collapsed ? 8 : 4}
                    className="min-w-[160px]"
                >
                    {languages.map((language) => (
                        <SelectItem key={language.code} value={language.code}>
                            {language.native_name || language.name}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>
        </div>
    );
}