import React from 'react';
import { AppIcon, APP_ICONS_BY_SIZE } from '../appIcon/appIcon';
import { COMPANY_ICONS_BY_SIZE, CompanyIcon } from '../companyIcon/companyIcon';
import { GlyphIcon, GLYPH_ICONS_BY_SIZE } from '../glyphIcon/glyphIcon';
import { StoreIcon, STORE_ICONS_BY_SIZE } from '../storeIcon/storeIcon';
import type { AppIconName } from '../appIcon/appIcon';
import type { CompanyIcons } from '../companyIcon/companyIcon';
import type { GlyphName12PX, GlyphName16PX, GlyphName24PX, GlyphName } from '../glyphIcon';
import type { StoreIconName } from '../storeIcon';

export type IconName12px = GlyphName12PX | StoreIconName;
export type IconName16px = GlyphName16PX | keyof CompanyIcons | AppIconName | StoreIconName;
export type IconName24px = GlyphName24PX | keyof CompanyIcons | StoreIconName;
export type IconName48px = keyof CompanyIcons | AppIconName;

export type IconNameProps =
    | { size: 12; name: IconName12px }
    | { size?: 16 | undefined; name: IconName16px }
    | { size: 24; name: IconName24px }
    | { size: 48; name: IconName48px };

export type IconProps = {
    className?: string;
    testId?: string;
} & IconNameProps;

/**
 * Icon includes glyphs, companies, apps, and stores
 *
 * @type atom
 * @status live
 * @tags visuals
 */
export const Icon: React.FC<IconProps> = ({ className, testId, name, size = 16 }) => {
    const props = { className, testId, name, size };
    if (GLYPH_ICONS_BY_SIZE[props.name as GlyphName]?.includes(size))
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        return <GlyphIcon {...(props as any)} />;

    if (STORE_ICONS_BY_SIZE[props.name as StoreIconName]?.includes(size))
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        return <StoreIcon {...(props as any)} />;

    if (COMPANY_ICONS_BY_SIZE[props.name]?.includes(size))
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        return <CompanyIcon {...(props as any)} />;

    if (APP_ICONS_BY_SIZE[props.name]?.includes(size))
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        return <AppIcon {...(props as any)} app={name} />;

    return null;
};