import React, { useRef, useEffect } from 'react';
import { Button, ButtonSize, ButtonVariants } from '../Button';
import { useDropdownContext } from './context';

export interface IDropdownToggleProps {
  as?: React.ReactNode | 'a' | 'span' | 'div';
  children?: any;
  className?: string;
  variant?: ButtonVariants;
  size?: ButtonSize;
  onClick?(e: any): void;
  [x: string]: any;
}

export const DropdownToggle: React.FC<IDropdownToggleProps> = (props) => {
  const { as, children, className = '', variant, size, onClick, otherProps } = props;
  const { visible, setVisible, setToggleRef } = useDropdownContext();
  const refToggle = useRef<HTMLDivElement>(null);

  const handleToggle = (e: React.MouseEvent) => {
    e.preventDefault();
    setVisible(!visible);
    onClick && onClick(e);
  };

  useEffect(() => {
    setToggleRef(refToggle);
  }, []);

  switch (as) {
    case 'a': {
      return (
        <a ref={refToggle} className={`b-dropdown-toggle ${className}`} onClick={handleToggle} {...otherProps}>
          {children}
        </a>
      );
    }
    case 'div': {
      return (
        <div ref={refToggle} className={`b-dropdown-toggle ${className}`} onClick={handleToggle} {...otherProps}>
          {children}
        </div>
      );
    }
    case 'span': {
      return (
        <span ref={refToggle} className={`b-dropdown-toggle ${className}`} onClick={handleToggle} {...otherProps}>
          {children}
        </span>
      );
    }
    default: {
      return (
        <Button ref={refToggle} variant={variant} size={size} className={`b-dropdown-toggle ${className}`} onClick={handleToggle} {...otherProps}>
          {children}
        </Button>
      );
    }
  }
};