"use client";

import React, { useTransition } from "react";
import { Locale, useLocale } from "next-intl";
import {
  SelectContent,
  SelectItem,
  SelectRoot,
  SelectTrigger,
  SelectValueText,
} from "@/components/ui/collections/select";
import { useParams } from "next/navigation";
import { createListCollection, ClientOnly } from "@chakra-ui/react";
import { usePathname, useRouter } from "@/i18n/navigation";

const LocaleSwitcher = () => {
  const locale = useLocale();
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();

  const collections = createListCollection({
    items: [
      { label: "English", value: "en" },
      { label: "Türkçe", value: "tr" },
    ],
  });

  function onSelectChange({ value }: { value: string[] }) {
    const nextLocale = value.at(0) as Locale;
    startTransition(() => {
      router.replace(
        // @ts-expect-error -- TypeScript will validate that only known `params`
        // are used in combination with a given `pathname`. Since the two will
        // always match for the current route, we can skip runtime checks.
        { pathname, params },
        { locale: nextLocale },
      );
    });
  }
  return (
    <ClientOnly fallback={<div style={{ height: "32px" }} />}>
      <SelectRoot
        disabled={isPending}
        value={[locale]}
        onValueChange={onSelectChange}
        w={{ base: "full", lg: "24" }}
        size="sm"
        variant="outline"
        borderRadius="md"
        collection={collections}
      >
        <SelectTrigger>
          <SelectValueText placeholder="Select a language" />
        </SelectTrigger>
        <SelectContent zIndex="9999">
          {collections.items.map((collection) => (
            <SelectItem key={collection.value} item={collection}>
              {collection.label}
            </SelectItem>
          ))}
        </SelectContent>
      </SelectRoot>
    </ClientOnly>
  );
};

export default LocaleSwitcher;