import classNames from 'classnames';
import { type FunctionComponent, memo } from 'react';

import CardChecklist from '@/icons/CardChecklist.svg';
import Cog from '@/icons/Cog.svg';
import Eraser from '@/icons/Eraser.svg';
import Github from '@/icons/Github.svg';
import KeyboardFill from '@/icons/KeyboardFill.svg';
import List from '@/icons/List.svg';
import Sack from '@/icons/Sack.svg';
import { GITHUB_PROJECT_URL } from '@/parameters';
import { selectConfig, useTranslate, useTypedSelector } from '@/state';

import { IconButton } from '../IconButton';

import styles from './NavButtons.module.scss';
import { selectHasInvalidWords, selectHasOverusedTiles } from './selectors';

interface Props {
  onClear: () => void;
  onShowKeyMap: () => void;
  onShowMenu: () => void;
  onShowRemainingTiles: () => void;
  onShowSettings: () => void;
  onShowWords: () => void;
}

const NavButtonsBase: FunctionComponent<Props> = ({
  onClear,
  onShowKeyMap,
  onShowMenu,
  onShowRemainingTiles,
  onShowSettings,
  onShowWords,
}) => {
  const translate = useTranslate();
  const config = useTypedSelector(selectConfig);
  const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
  const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);

  return (
    <div className={styles.navButtons}>
      <div className={styles.group}>
        <IconButton
          aria-label={translate('common.clear')}
          className={styles.button}
          Icon={Eraser}
          tooltip={translate('common.clear')}
          onClick={onClear}
        />
      </div>

      <div className={styles.separator} />

      <div className={classNames(styles.group, styles.fullNav)}>
        {config.supportsRemainingTiles && (
          <IconButton
            aria-label={translate('remaining-tiles')}
            className={classNames(styles.button, {
              [styles.error]: hasOverusedTiles,
            })}
            Icon={Sack}
            tooltip={translate('remaining-tiles')}
            onClick={onShowRemainingTiles}
          />
        )}

        <IconButton
          aria-label={translate('words')}
          className={classNames(styles.button, {
            [styles.error]: hasInvalidWords,
          })}
          Icon={CardChecklist}
          tooltip={translate('words')}
          onClick={onShowWords}
        />
      </div>

      <div className={classNames(styles.separator, styles.fullNav)} />

      <div className={classNames(styles.group, styles.fullNav)}>
        <IconButton.Link
          aria-label={translate('github')}
          className={styles.button}
          href={GITHUB_PROJECT_URL}
          Icon={Github}
          rel="noopener noreferrer"
          target="_blank"
          tooltip={translate('github')}
        />
      </div>

      <div className={classNames(styles.separator, styles.fullNav)} />

      <div className={classNames(styles.group, styles.fullNav)}>
        <IconButton
          aria-label={translate('keyMap')}
          className={classNames(styles.button, styles.keyMapButton)}
          Icon={KeyboardFill}
          tooltip={translate('keyMap')}
          onClick={onShowKeyMap}
        />

        <IconButton
          aria-label={translate('settings')}
          data-testid="settings-button"
          className={styles.button}
          Icon={Cog}
          tooltip={translate('settings')}
          onClick={onShowSettings}
        />
      </div>

      <div className={classNames(styles.group, styles.shortNav)}>
        <IconButton
          aria-label={translate('menu')}
          className={styles.button}
          Icon={List}
          tooltip={translate('menu')}
          onClick={onShowMenu}
        />
      </div>
    </div>
  );
};

export const NavButtons = memo(NavButtonsBase);