import React from 'react';
import cx from 'classnames';
import * as navIcons from '../../icons/navIcons/32px';
import { lowerFirst, upperFirst } from '../../utils';

type NavIconLowerCaseName = keyof typeof navIcons;
type NavIconCamelCaseName<T extends NavIconLowerCaseName> = `${Capitalize<T>}NavIcon`;

export type NavIconName = NavIconLowerCaseName | NavIconCamelCaseName<NavIconLowerCaseName>;

export interface NavIconProps {
    inverse?: boolean;
    className?: string;
    name: NavIconName;
    testId?: string;
}

export const getNavIconNames = () => Object.keys(navIcons) as NavIconName[];

/**
 * Nav icons are visual representation of an app section. They communicate visually to users how the app is organised and convey the scope of each section.
 *
 * @type atom
 * @status live
 * @tags visuals
 */
export const NavIcon: React.FC<NavIconProps> = ({ name, testId, className }) => {
    const iconName = name?.endsWith('NavIcon')
        ? lowerFirst(name.substring(0, name.indexOf('NavIcon')))
        : name;

    const Icon = navIcons[iconName as NavIconLowerCaseName];
    if (!Icon) return null;

    const iconClassName = `${upperFirst(iconName)}NavIcon`;

    return (
        <Icon
            data-testid={testId ?? iconClassName}
            className={cx(`Icon NavIcon`, iconClassName, className)}
            height={32}
            width={32}
        />
    );
};