import React from 'react';
import { useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
import styles from './Header.scss';
import {
  HeaderLogo,
  YukiPlatformSelector,
  YukiPlatformSelectorItem,
  HeaderSearch,
  HeaderUserSection,
  HeaderButton,
  Icon
} from '@spglobal/react-components';
import { utils } from '@spglobal/ca-mfe-package-utils';


export const Header: React.FC = () => {
  const location = useLocation();
  const { t } = useTranslation(['main']);
  const isActiveRoute = (route: string) => location.pathname.includes(route);

  return (
    <>
      <header className="spg-header spg-header--yuki">
        <HeaderLogo
          alt="S&P Capital IQ Pro"
          homepageLink="#"
          image="https://www.spglobal.com/_media/images/logo-spglobal.svg"
        >
          <YukiPlatformSelector>
            <YukiPlatformSelectorItem href="#" >
              S&P Capital IQ Pro
            </YukiPlatformSelectorItem>
            <YukiPlatformSelectorItem href="#">
              Ratings 360
            </YukiPlatformSelectorItem>
          </YukiPlatformSelector>
        </HeaderLogo>

        <HeaderSearch placeholder="Search Product" />
        <HeaderUserSection>
          <HeaderButton>
            <Icon
              icon="folder"
              size={utils.Helpers.Size.LARGE}
            />
          </HeaderButton>
          <HeaderButton>
            <Icon
              icon="user"
              size={utils.Helpers.Size.LARGE}
            />
          </HeaderButton>
          <HeaderButton>
            <Icon
              icon="circle-help"
              size={utils.Helpers.Size.LARGE}
            />
          </HeaderButton>
        </HeaderUserSection>
      </header>

      <div className="spg-nav">
        <nav className={classNames(styles['spg-nav__item'], styles['spg-nav__nav'])}>
          <ul className={styles['spg-nav__nav-menu']}>
            <li>
              <a
                className={classNames(styles['spg-nav__nav-link'], {
                  [styles['spg-nav__nav-link--active']]: isActiveRoute('homepage')
                })}
                href="#homepage"
              >
                {t('main:homepageMenuItem')}
              </a>
            </li>
            <li>
              <a
                className={classNames(styles['spg-nav__nav-link'], {
                  [styles['spg-nav__nav-link--active']]: isActiveRoute('dashboard')
                })}
                href="#dashboard"
              >
                {t('main:dashboardMenuItem')}
              </a>
            </li>
            <li>
              <a
                className={classNames(styles['spg-nav__nav-link'], {
                  [styles['spg-nav__nav-link--active']]: isActiveRoute('users')
                })}
                href="#users"
              >
                {t('main:usersMenuItem')}
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </>
  );
};
