import React, { useState } from "react";
import classnames from "classnames";
import PropTypes from "prop-types";

export interface INavbarLoginContainerProps {
  children?: React.ReactNode | React.ReactNode[];
  className?: string;
  avatarIcon: React.ReactNode;
}

const NavbarLoginContainer: React.FC<INavbarLoginContainerProps> = ({
  className,
  children,
  avatarIcon
}: INavbarLoginContainerProps) => {
  const [isMenuHovered, setMenuHovered] = React.useState(false);
  const [isMenuHoveredAnimate, setMenuHoveredAnimate] = React.useState(false);
  const setMenuHoverState = (show: boolean) => {
    if (show) {
      setTimeout(() => {
        setMenuHoveredAnimate(true);
      });
      setMenuHovered(true);
    } else {
      setTimeout(() => {
        setMenuHovered(false);
      }, 150);
      setMenuHoveredAnimate(false);
    }
  };

  return (
    <li
      className={classnames("nav-item login-container", className)}
      onMouseEnter={() => {
        setMenuHoverState(true);
      }}
      onMouseLeave={() => {
        setMenuHoverState(false);
      }}
    >
      {avatarIcon}
      <div
        className={classnames(
          "dropdown-arrow",
          { show: isMenuHovered },
          { hover: isMenuHoveredAnimate }
        )}
      ></div>
      <div
        className={classnames(
          "dropdown-menu",
          { show: isMenuHovered },
          { hover: isMenuHoveredAnimate }
        )}
      >
        {children}
      </div>
    </li>
  );
};

NavbarLoginContainer.displayName = "NavbarLoginContainer";
NavbarLoginContainer.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
  className: PropTypes.string,
  avatarIcon: PropTypes.element
};

export default NavbarLoginContainer;