import React, { memo, useMemo } from 'react';
import { ReactSVG } from 'react-svg';
import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
import Typography from '@mui/material/Typography';
import startCase from 'lodash/startCase';
import get from 'lodash/get';
import kebabCase from 'lodash/kebabCase';
import clsx from 'clsx';
import { Link } from '../link';
import { BreadcrumbsProps, NavItem as Item } from './types';

import { ASSETS_URL } from '../../../consts/common';
import { trimSpaces } from '../../../utils/common/formatters';

import { createClasses } from './styles';

const Breadcrumbs = (props: BreadcrumbsProps) => {
  const { pathname, sidebarItemsMap = {}, customBreadcrumbs } = props;

  const classes = createClasses();

  const breadcrumbs = useMemo(() => {
    if (customBreadcrumbs) {
      return customBreadcrumbs;
    }

    if (pathname) {
      const linkPath = pathname.split('/');
      linkPath.shift();

      return linkPath.map((path, index) => {
        const text = index === 0 ? sidebarItemsMap[path]?.name || path : path;

        let href;

        if (index === 0) {
          href = sidebarItemsMap[path]?.rootPath;
        } else {
          const subItem = sidebarItemsMap[linkPath[0]]?.items?.find(
            (sub: Item) => kebabCase(sub?.name).replace('&', '') === linkPath[1]
          );
          if (subItem?.path) {
            href = subItem.path;
          } else {
            const innerItem = get(subItem, 'subItems', []).find(
              (sub: Item) => kebabCase(sub?.name).replace('&', '') === linkPath[2]
            );
            if (innerItem?.path) {
              href = innerItem.path;
            }
          }
        }
        if (href === pathname) {
          href = '';
        }
        return {
          text,
          href
        };
      });
    }
    return [];
  }, [customBreadcrumbs, pathname, sidebarItemsMap]);

  return (
    <MuiBreadcrumbs
      separator={
        <ReactSVG className={classes.separator} src={`${ASSETS_URL}/icons/icon_arrow.svg`} />
      }
      data-testid="breadcrumbsRoot"
    >
      {breadcrumbs.map((breadcrumb, i) => {
        const { href = '', text: rawText } = breadcrumb;
        const text = customBreadcrumbs ? rawText : startCase(rawText);
        return href.length && !(i === breadcrumbs.length - 1) ? (
          <Link key={`key_${text}`} href={href} data-testid={`breadcrumbs-${trimSpaces(text)}`}>
            <Typography component="span" className={classes.text} variant="body2">
              {text}
            </Typography>
          </Link>
        ) : (
          <Typography
            key={`key_${text}`}
            variant="body2"
            component="span"
            className={clsx(classes.text, i === breadcrumbs.length - 1 && classes.current)}
            data-testid={`breadcrumbs-${trimSpaces(text)}`}
          >
            {text}
          </Typography>
        );
      })}
    </MuiBreadcrumbs>
  );
};

Breadcrumbs.defaultProps = {
  pathname: '',
  sidebarItemsMap: {}
};

const m = memo(Breadcrumbs);
export { m as Breadcrumbs };