import { useTranslation } from 'react-i18next';
import { StyledLangButton, StyledNavbar, StyledNavBrand, StyledNavlinksWrapper } from './styles/Navbar.styled';

interface NavLink {
  title: string;
  href: string;
}

function scrollToSection(e: React.MouseEvent, href: string) {
  e.preventDefault();

  document.querySelector(href)!.scrollIntoView({
    behavior: 'smooth',
  });
}

function Navlinks(props: { navlinks: NavLink[] }) {
  const { t } = useTranslation();

  return (
    <StyledNavlinksWrapper>
      <ul>
        {props.navlinks.map((navlink) => (
          <li key={navlink.title}>
            <a href={navlink.href} onClick={(e) => scrollToSection(e, navlink.href)}>
              {t(`navbar.${navlink.title}`)}
            </a>
          </li>
        ))}
      </ul>

      <LanguageChoice />
    </StyledNavlinksWrapper>
  );
}

function LanguageChoice() {
  const { i18n } = useTranslation();

  function changeLanguage() {
    i18n.changeLanguage(i18n.language == 'pl' ? 'en' : 'pl');
  }

  return (
    <StyledLangButton aria-description="Change language" onClick={changeLanguage}>
      {i18n.language}
    </StyledLangButton>
  );
}

const navlinks = [
  // {
  //   title: 'home',
  //   href: '#',
  // },
  {
    title: 'about',
    href: '#about',
  },
  {
    title: 'projects',
    href: '#projects',
  },
  {
    title: 'contact',
    href: '#contact',
  },
];

export default function Navbar() {
  const { t } = useTranslation();

  return (
    <StyledNavbar>
      <div className="navbar-content">
        <StyledNavBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
          {t('navbar.title')}
        </StyledNavBrand>

        <Navlinks navlinks={navlinks} />
      </div>
    </StyledNavbar>
  );
}