import { IoApps, IoSettingsOutline } from 'react-icons/io5';

import { useFadeOutOnInactivity } from '../../../hooks/useFadeOutOnInactivity';
import { cx } from '../../../utils/styleUtils';
import IconButton from '../../buttons/IconButton';

import style from './FloatingNavigation.module.scss';

interface FloatingNavigationProps {
  toggleMenu?: () => void;
  toggleSettings?: () => void;
  hasSavedChanges?: boolean;
}

export default function FloatingNavigation({ toggleMenu, toggleSettings, hasSavedChanges }: FloatingNavigationProps) {
  const isButtonShown = useFadeOutOnInactivity(true);

  return (
    <div
      id='fadeable-navigation'
      className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
    >
      {toggleMenu && (
        <div className={style.buttonWithIndicator}>
          <IconButton
            variant='subtle-white'
            size='xlarge'
            onClick={toggleMenu}
            aria-label='toggle menu'
            data-testid='navigation__toggle-menu'
          >
            <IoApps />
          </IconButton>
          {hasSavedChanges && <span className={style.indicator} data-testid='navigation__saved-indicator' />}
        </div>
      )}
      {toggleSettings && (
        <IconButton
          variant='subtle-white'
          size='xlarge'
          onClick={toggleSettings}
          aria-label='toggle settings'
          data-testid='navigation__toggle-settings'
        >
          <IoSettingsOutline />
        </IconButton>
      )}
    </div>
  );
}