/* eslint-disable react/forbid-component-props */
import React, { CSSProperties, HTMLAttributeAnchorTarget, useMemo } from 'react';

import { BaseColorTokens } from '../../../foundation/Colors';
import { TypographyTokens } from '../../../foundation/Typography';
import { AttentionIndicator } from '../../AttentionIndicator';
import { Popover } from '../../Popover';
import { ToggleCaret } from '../../ToggleCaret';
import { isActiveLink } from './is-active-link';
import { NavItem, NavLinkButton, NavLinkButtonBox, NavLinkRootButton } from './NavLink.styled';
import { SubLinks, SubLinksProps } from './SubLinks/SubLinks';
import { useLocation } from './useLocation';

export type NavLinkProps = React.PropsWithChildren<{
  Component?: SubLinksProps['Component'];
  className?: string;
  colorToken?: BaseColorTokens | 'rainbow';
  isNew?: boolean;
  itemContainerStyles?: CSSProperties;
  link?: string;
  onItemClicked?: (href?: string) => void;
  subLinks?: {
    isHidden?: boolean;
    isNew?: boolean;
    link: string;
    target?: HTMLAttributeAnchorTarget | undefined;
    text: string;
  }[];
  target?: HTMLAttributeAnchorTarget | undefined;
  typographyToken?: TypographyTokens;
}>;

export const NavLink: React.FunctionComponent<NavLinkProps> = ({
  className,
  subLinks = [],
  children,
  link,
  isNew,
  colorToken = 'white',
  Component,
  typographyToken = 'bodyMediumMedium',
  target,
  itemContainerStyles,
  onItemClicked,
}) => {
  const { pathname } = useLocation();
  const subLinksNotHidden = useMemo(
    () => (subLinks || []).filter((sL) => !sL.isHidden),
    [subLinks],
  );
  const hasSubLinks = subLinksNotHidden.length !== 0;
  const [isSubmenuOpened, setIsSubmenuOpened] = React.useState(false);
  const handleSubmenuClose = () => setIsSubmenuOpened(false);

  const handleOnNavLinkClick = (
    e:
      | React.MouseEvent<HTMLSpanElement, MouseEvent>
      | React.MouseEvent<HTMLAnchorElement, MouseEvent>,
  ) => {
    if (isActive || hasSubLinks) {
      e.preventDefault();
      e.stopPropagation();
    }

    if (hasSubLinks) {
      if (isSubmenuOpened) {
        handleSubmenuClose();
      } else {
        setIsSubmenuOpened(true);
      }
    }
  };

  const isActive = isActiveLink(link, subLinksNotHidden?.map((l) => l.link), pathname);

  const to = link || '';
  const NavLinkButtonComputed = Component
    ? NavLinkButton.withComponent(Component)
    : to
    ? NavLinkButton
    : NavLinkRootButton;

  const linkButton = (
    <NavLinkButtonBox
      colorToken={colorToken}
      data-testid={
        isSubmenuOpened ? 'OpenNavLinkButton' : isActive ? 'ActiveNavLinkButton' : 'NavLinkButton'
      }
      isActive={isActive}
      isPopoverOpen={isSubmenuOpened}
      onClick={() => {
        onItemClicked?.(link);

        if (hasSubLinks) {
          if (isSubmenuOpened) {
            handleSubmenuClose();
          } else {
            setIsSubmenuOpened(true);
          }
        }
      }}
    >
      {isNew ? <AttentionIndicator colorToken="error100" /> : null}
      <NavLinkButtonComputed
        colorToken={colorToken}
        href={to}
        isActive={isActive}
        isPopoverOpen={isSubmenuOpened}
        role="link"
        target={target}
        to={to}
        typographyToken={typographyToken}
        onClick={handleOnNavLinkClick}
      >
        {children}
      </NavLinkButtonComputed>
      {!hasSubLinks ? null : (
        <ToggleCaret
          isOpen={isSubmenuOpened}
          onClick={(e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
            e.stopPropagation();
            if (hasSubLinks) {
              if (isSubmenuOpened) {
                handleSubmenuClose();
              } else {
                setIsSubmenuOpened(true);
              }
            }
          }}
        />
      )}
    </NavLinkButtonBox>
  );

  return (
    <NavItem
      className={className}
      data-testid={hasSubLinks ? 'NavLinkWithSubLinks' : 'NavLinkWithoutSubLinks'}
      style={itemContainerStyles}
    >
      {hasSubLinks ? (
        <Popover
          content={
            <SubLinks
              Component={Component}
              subLinks={subLinksNotHidden || []}
              onClick={handleSubmenuClose}
              onSubLinkClick={onItemClicked}
            />
          }
          data-testid="NavLinkPopover"
          isOpen={isSubmenuOpened}
          onClickOutside={handleSubmenuClose}
        >
          {linkButton}
        </Popover>
      ) : (
        linkButton
      )}
    </NavItem>
  );
};