import React from 'react';
import { uniq } from '@theorchard/suite-utils';
import cx from 'classnames';
import * as illustrations100px from '../../icons/illustrations/100px';
import * as illustrations150px from '../../icons/illustrations/150px';
import * as illustrations200px from '../../icons/illustrations/200px';
import * as illustrations50px from '../../icons/illustrations/50px';
import { upperFirst } from '../../utils';
import type { SvgComponent } from '../../types';

export type IllustrationName50PX = keyof typeof illustrations50px;
export type IllustrationName100PX = keyof typeof illustrations100px;
export type IllustrationName150PX = keyof typeof illustrations150px;
export type IllustrationName200PX = keyof typeof illustrations200px;
export type IllustrationName =
    | IllustrationName50PX
    | IllustrationName100PX
    | IllustrationName150PX
    | IllustrationName200PX;

type IllustrationSize = 50 | 100 | 150 | 200;

export interface IllustrationProps {
    className?: string;
    testId?: string;
    size?: IllustrationSize;
    name: IllustrationName;
}

const illustrations50pxComponents: Record<string, SvgComponent> = illustrations50px;
const illustrations100pxComponents: Record<string, SvgComponent> = illustrations100px;
const illustrations150pxComponents: Record<string, SvgComponent> = illustrations150px;
const illustrations200pxComponents: Record<string, SvgComponent> = illustrations200px;

export const getIllustrationNames = () =>
    uniq([
        ...Object.keys(illustrations50px),
        ...Object.keys(illustrations100px),
        ...Object.keys(illustrations150px),
        ...Object.keys(illustrations200px),
    ]) as IllustrationName[];

export const getIllustrationNamesBySize = () => ({
    50: Object.keys(illustrations50pxComponents) as IllustrationName50PX[],
    100: Object.keys(illustrations100pxComponents) as IllustrationName100PX[],
    150: Object.keys(illustrations150pxComponents) as IllustrationName150PX[],
    200: Object.keys(illustrations200pxComponents) as IllustrationName200PX[],
});

const getIcon = (size: IllustrationSize, name: IllustrationName): SvgComponent | undefined => {
    if (size === 50) return illustrations50pxComponents[name];
    if (size === 100) return illustrations100pxComponents[name];
    if (size === 150) return illustrations150pxComponents[name];
    if (size === 200) return illustrations200pxComponents[name];
    return undefined;
};
/**
 * Illustration component provides generic product illustrations. They're used in ErrorMessage or InfoMessage components.
 *
 * @type atom
 * @status live
 * @tags visuals
 */
export const Illustration: React.FC<IllustrationProps> = ({
    className,
    testId,
    size = 200,
    name,
}) => {
    const Icon = getIcon(size, name);
    if (!Icon) return null;

    const illustrationClassName = `${upperFirst(name)}Illustration`;

    return (
        <Icon
            data-testid={testId ?? illustrationClassName}
            className={cx(`Illustration`, illustrationClassName, className)}
            height={size}
            width={size}
        />
    );
};