import { Router, useRouter } from 'next/dist/client/router';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import styles from '../Header/Header.module.scss';
import { PageProps } from '../Page';

const LanguageSelector = () => {
  const router = useRouter();
  const { locales, locale: activeLocale, components, route } = router as Router;
  const [pageProps, setPageProps] = useState<PageProps>();

  useEffect(() => {
    const pageProps: PageProps = components[route].props?.pageProps;
    setPageProps(pageProps);
  }, [components, route]);

  return (
    (pageProps && (
      <>
        {locales?.map((locale, id) => {
          return (
            activeLocale !== locale && (
              <Link
                href={
                  pageProps?.page?.languages
                    ? pageProps?.page?.languages[locale].url
                    : ''
                }
                key={locale}
                locale={false}
                legacyBehavior={true}
              >
                <a
                  className={`${
                    activeLocale === locale ? styles.activeHeader : ''
                  }`}
                >
                  {locale.toUpperCase()}
                </a>
              </Link>
            )
          );
        })}
      </>
    )) ||
    null
  );
};

export default LanguageSelector;