/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { FC } from 'react';
import { FaAngleRight } from 'react-icons/fa';
import cn from 'classnames';

import { StyledAnchor, StyledDivCounter, StyledRoundSideBarCounter } from '../../StyledComponents';
import { useTheme } from '../../Theme';
import { SideBarMenuItemProps, SideBarMenuProps } from '../types.d';
import { Tooltip } from '../../Tooltip';
import { Skeleton } from '../../Skeleton';

export const SideBarMenuItem: FC<SideBarMenuItemProps> = ({
  className = '',
  count,
  countLoading = false,
  disabled = false,
  icon = null,
  id = '',
  isSelected,
  minimized = false,
  onClick,
  subItems = [],
  title,
  tooltipText,
}) => {
  const classNames = cn({
    sidebar__item: true,
    active: isSelected,
    [className]: true,
    disabled,
  });

  const bodyClassNames = cn({
    minimized,
    sidebar__body: true,
  });

  const theme = useTheme();

  if (subItems.length === 0) {
    return (
      <Tooltip title={tooltipText} key={id + title}>
        <StyledAnchor
          $disabled={disabled}
          $selected={isSelected}
          $theme={theme}
          className={classNames}
          onClick={() => (disabled ? {} : onClick(id))}
          role="presentation"
        >
          <div className="icon">{icon}</div>
          {!minimized && (
            <>
              <p className="sidebar__link__text">{title}</p>
              {count !== undefined ? (
                <StyledRoundSideBarCounter $theme={theme} className="sidebar__counter">
                  {countLoading ? <Skeleton /> : count}
                </StyledRoundSideBarCounter>
              ) : null}
            </>
          )}
        </StyledAnchor>
      </Tooltip>
    );
  }

  return (
    <React.Fragment key={id + title}>
      <div className={classNames}>
        <Tooltip title={tooltipText}>
          <StyledAnchor
            $disabled={disabled}
            $selected={isSelected}
            $theme={theme}
            className="sidebar__head"
            onClick={() => (disabled ? {} : onClick(id))}
            role="presentation"
          >
            <div className="icon">{icon}</div>
            {!minimized && (
              <>
                <p className="sidebar__link__text">{title}</p>
                <div className="sidebar_expand_icon">
                  <FaAngleRight size={16} />
                </div>
              </>
            )}
          </StyledAnchor>
        </Tooltip>
        <div className={bodyClassNames}>
          {subItems.map((subItem, index) => {
            return (
              <Tooltip title={subItem.tooltipText} key={index.toString() + subItem.title}>
                <StyledAnchor
                  $disabled={subItem.disabled}
                  $selected={subItem.isSelected}
                  $theme={theme}
                  className="sidebar__link"
                  onClick={() => (disabled ? {} : subItem.onClick(subItem.id))}
                  role="presentation"
                >
                  {subItem.icon && <div className="subitem__icon">{subItem.icon}</div>}
                  {!minimized && (
                    <>
                      <p className="sidebar__link__text">{subItem.title}</p>
                      {subItem.count !== undefined ? (
                        <StyledDivCounter $theme={theme} className="sidebar__number">
                          {subItem.countLoading ? <Skeleton style={{ width: 20 }} /> : subItem.count}
                        </StyledDivCounter>
                      ) : null}
                    </>
                  )}
                </StyledAnchor>
              </Tooltip>
            );
          })}
        </div>
      </div>
    </React.Fragment>
  );
};

export const SideBarMenu: FC<SideBarMenuProps> = ({ data, className = '', minimized = false }) => {
  const classNames = cn({
    [className]: true,
    sidebar__menu: true,
  });
  return <div className={classNames}>{data.map((d) => SideBarMenuItem({ ...d, minimized }))}</div>;
};
