'use client';

import { useTransition } from 'react';

import { Locale, useLocale } from 'next-intl';
import { useParams, useSearchParams } from 'next/navigation';

import { appLocales } from '@/config/i18n';
import { usePathname, useRouter } from '@/i18n/navigation';

// todo flags

const LangSelector: React.FC = () => {
  const locale = useLocale();
  const router = useRouter();
  const [, startTransition] = useTransition();
  const pathname = usePathname();
  const params = useParams();
  const searchParams = useSearchParams();
  const handleLocaleChange = (newLocale: string) => {
    const nextLocale = newLocale as Locale;

    startTransition(() => {
      router.replace(
        // @ts-expect-error -- TypeScript validates params for the active route,
        // so the runtime combination here is safe.
        { pathname, params, query: Object.fromEntries(searchParams.entries()) },
        { locale: nextLocale }
      );
    });
  };

  return (
    <div className="flex items-center border border-[#151720]/15 bg-white shadow-sm">
      {appLocales.map((candidate) => {
        const isActive = locale === candidate;
        const baseClasses =
          'tracking-[0.2em] px-3 xl:px-4 py-2 transition font-roboto font-bold uppercase xl:text-base border border-transparent';
        const stateClasses = isActive ? 'bg-[#151720] text-white' : 'bg-white text-[#151720]/70';
        const hoverClass = !isActive ? ' hover:bg-[#f4f3ef]' : '';

        return (
          <button
            key={candidate}
            className={`${baseClasses} ${stateClasses}${hoverClass}`}
            onClick={() => handleLocaleChange(candidate)}
            title="Nyelv váltása"
          >
            {candidate.toUpperCase()}
          </button>
        );
      })}
    </div>
  );
};

export default LangSelector;