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

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

function ToggleState(isHidden: boolean,
  setHidden: React.Dispatch<React.SetStateAction<boolean>>): void {
  setHidden(!isHidden);
}

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

  return (
    <div className={`transition-all ${props.className}`}>
      <div className={`transition-all flex flex-col gap-2 items-center ${buttonListClasses}`}>
        {props.children}
      </div>
      <button type="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>);
}