"use client";

import { useLocale } from "next-intl";
import { useParams } from "next/navigation";
import { locales } from "@/config";
import { usePathname, useRouter } from "@/i18n/routing";

import { useEffect, useState, useTransition } from "react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import Image from "next/image";
import Cookies from "js-cookie";

export const getLanguage = (): string | null => {
  if (typeof window === "undefined") return null;
  return localStorage.getItem("language");
};

export const setLanguage = (value: string) => {
  if (typeof window === "undefined") return;
  localStorage.setItem("language", value);
};

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const localActive = useLocale() || "in";
  const [selectedLang, setSelectedLang] = useState<string>("");

  useEffect(() => {
    const storedLang = getLanguage();

    if (!storedLang) {
      setLanguage("in");
      setSelectedLang("in");

      startTransition(() => {
        router.replace(pathname, { locale: "in" });
      });
    } else {
      setSelectedLang(storedLang);
      startTransition(() => {
        router.replace(pathname, { locale: storedLang });
      });
    }
  }, []);

  const onSelectChange = (nextLocale: string) => {
    setLanguage(nextLocale);
    setSelectedLang(nextLocale);
    startTransition(() => {
      router.replace(pathname, { locale: nextLocale });
    });
  };
  return (
    <Select onValueChange={onSelectChange} value={selectedLang}>
      <SelectTrigger className="w-[94px] border-none read-only:bg-transparent">
        <SelectValue placeholder="Select a language" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="in" className="border-none">
          <div className="flex items-center gap-1">
            <Image
              src="/images/all-img/flag-3.png"
              alt="flag"
              width={24}
              height={24}
              className="w-6 h-6 rounded-full"
            />
            <span className="font-medium text-sm text-default-600 dark:text-default-700">
              In
            </span>
          </div>
        </SelectItem>
        <SelectItem value="en" className="border-none">
          <div className="flex items-center gap-1">
            <Image
              src="/images/all-img/flag-1.png"
              alt="flag"
              width={24}
              height={24}
              className="w-6 h-6 rounded-full"
            />
            <span className="font-medium text-sm text-default-600 dark:text-default-700">
              En
            </span>
          </div>
        </SelectItem>

        {/* <SelectItem value="ar">
                    <div className='flex items-center gap-1'>
                        <Image
                            src="/images/all-img/flag-2.png"
                            alt='flag'
                            width={24}
                            height={24}
                            className='w-6 h-6 rounded-full'
                        />
                        <span className='font-medium text-sm text-default-600 dark:text-default-700'>Ar</span>
                    </div>
                </SelectItem> */}
      </SelectContent>
    </Select>
  );
}