import { usePathName } from '../DashboardTable';
import { breadcrumbNameMap } from './helpers';
import { useBreadCrumbsMessages } from './i18n';
import { Breadcrumb } from 'antd';
import { NavLink, useParams } from 'react-router-dom';
import styles from './BreadCrumbs.module.scss';

const { Item } = Breadcrumb;

export const BreadCrumb = (): JSX.Element => {
  const { home, ...translations } = useBreadCrumbsMessages();

  const pathname = usePathName();
  const { id } = useParams();

  const breadCrumbView = (): any => {
    const pathSnippets = pathname.split('/').filter((i) => i);
    let keepUrl = false;
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
      if (
        url === '/gossopka' ||
        url === '/rotation' ||
        url === '/accounts' ||
        url === '/settings' ||
        url === '/license'
      ) {
        keepUrl = true;
      }
      return (
        <Item key={url}>
          <NavLink to={keepUrl ? pathname : url}>
            {breadcrumbNameMap(translations, id)[url]}
          </NavLink>
        </Item>
      );
    });
    const breadcrumbItems = [
      <Item key="home">
        <NavLink to="/">{home}</NavLink>
      </Item>,
    ].concat(extraBreadcrumbItems);

    return (
      <Breadcrumb className={styles['container']}>{breadcrumbItems}</Breadcrumb>
    );
  };

  return breadCrumbView();
};
