import * as React from 'react';
import { MenuIcon, XIcon } from '@heroicons/react/outline';

interface IFloatingButtonProps {
  children: React.ReactNode[] | React.ReactNode
  className: string
}

const toggleState = (
  isHidden: boolean,
  setHidden: React.Dispatch<React.SetStateAction<boolean>>
) => {
  setHidden(!isHidden);
};

const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
  const [isHidden, setHidden] = React.useState(true);
  const buttonListClasses = isHidden ? 'opacity-0' : 'opacity-100';
  const icon = isHidden
    ? <MenuIcon className="floating-btn" />
    : <XIcon className="floating-btn" />;

  return (
    <div className={props.className}>
      <div className={`transition-all ${buttonListClasses}`}>
        { props.children }
      </div>
      <button
        className={'transition-all w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
        title='Open menu'
        onClick={() => toggleState(isHidden, setHidden)}
      >
        { icon }
      </button>
    </div>);
};

export default FloatingButton;