/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { FunctionComponent, useContext, useEffect } from 'react';
import { AiOutlineMenu } from 'react-icons/ai';
import cn from 'classnames';

import { NavbarProps } from './types.d';
import { NavbarRightPanel } from './navbar-right-panel';
import { Context } from '../context';
import { useTheme } from '../Theme';
import { StyledIconButton, StyledLightBackgroundWrapper } from '../StyledComponents';
import { ActivityIndicator } from '../Activity-Indicator';
import { Title } from '../Title';

const BurgerButton = () => {
  const { toggleSideBarVisibility } = useContext(Context);
  const theme = useTheme();
  return (
    <button type="button" className="header__burger js-header-burger" onClick={() => toggleSideBarVisibility()}>
      <StyledIconButton className="icon icon-burger" $theme={theme}>
        <AiOutlineMenu size={20} />
      </StyledIconButton>
    </button>
  );
};

export const Navbar: FunctionComponent<NavbarProps> = ({
  className = '',
  isLoading = false,
  logo = { light: () => null, dark: () => null },
  rightPanel,
  title,
  logoWidth,
}): React.ReactElement => {
  const theme = useTheme();
  const { setLogo, toggleSideBarVisibility, isSideBarVisible } = useContext(Context);

  useEffect(() => {
    setLogo(logo);
  }, []);

  const classNames = cn({
    header: true,
    'js-header': true,
    [className]: !!className,
  });

  const renderLogo = () => {
    const logoClassNames = cn({
      header__logo: true,
      clickable: !!logo.onClick,
    });
    return (
      <a className={logoClassNames} onClick={logo.onClick} role="presentation">
        {logo.dark ? (
          <div style={{ width: logoWidth }} className="header__pic header__pic_black">
            {logo.dark()}
          </div>
        ) : null}
        {logo.light ? (
          <div style={{ width: logoWidth }} className="header__pic header__pic_white">
            {logo.light()}
          </div>
        ) : null}
      </a>
    );
  };

  const headerBgClassNames = cn({
    header__bg: true,
    'js-header-bg': true,
    show: isSideBarVisible,
  });

  return (
    <StyledLightBackgroundWrapper $theme={theme} className={classNames}>
      <BurgerButton />
      {renderLogo()}
      <Title className="header__title">{title}</Title>
      {isLoading ? <ActivityIndicator size={22} style={{ marginLeft: '10px' }} /> : null}
      <NavbarRightPanel buttons={rightPanel?.buttons} search={rightPanel?.search} className={rightPanel?.className} />
      <div className={headerBgClassNames} onClick={() => toggleSideBarVisibility()} role="presentation" />
    </StyledLightBackgroundWrapper>
  );
};
