import type { FC } from 'react';
import React from 'react';
import * as consts from '@theorchard/constants';
import * as icons from './icons';
import type { AppIconProps, IconProps } from './types';

const APP_PREFIX = 'frontend-';
const APP_SUFFIX = '_app';
// TODO: Consider moving all application names to constants
const PLACEHOLDER = 'placeholder';
const SOLFEGE = 'solfege';
const FANSIFTER = 'fansifter';
const ROYALTIES = 'royalties';
const HELP_CENTER = 'help-center';

const APP_ICONS = {
    [SOLFEGE]: icons.SolfegeAppIcon,
    [PLACEHOLDER]: icons.PlaceholderAppIcon,
    [FANSIFTER]: icons.FansifterAppIcon,
    [consts.APP_ACCOUNT360]: icons.PlaceholderAppIcon,
    [consts.APP_AUDIENCE]: icons.FansifterAppIcon,
    [consts.APP_DISTRIBUTION]: icons.DistributionAppIcon,
    [consts.APP_DISTRIBUTION_LONG]: icons.DistributionAppIcon,
    [consts.APP_DOCUMENTS]: icons.DocumentsAppIcon,
    [consts.APP_INSIGHTS]: icons.InsightsAppIcon,
    [consts.APP_MONEYHUB]: icons.MoneyhubAppIcon,
    [consts.APP_PODCASTS]: icons.PodcastsAppIcon,
    [consts.APP_PODCASTS_LONG]: icons.PodcastsAppIcon,
    [consts.APP_SETTINGS]: icons.SettingsAppIcon,
    [consts.APP_WORKSTATION]: icons.WorkstationAppIcon,
    [consts.APP_SONGWHIP]: icons.SongwhipAppIcon,
    [consts.APP_PUBLISHING]: icons.PublishingAppIcon,
    [consts.APP_COLLABORATORS]: icons.CollaboratorsAppIcon,
    [consts.APP_COLLABORATORS_LONG]: icons.CollaboratorsAppIcon,
    [consts.APP_CONTENT]: icons.ContentAppIcon,
    [consts.APP_ABACUS]: icons.AbacusAppIcon,
    [ROYALTIES]: icons.AbacusAppIcon,
    [HELP_CENTER]: icons.HelpCenterAppIcon,
} as const;

export const APP_ICONS_BY_SIZE = Object.keys(APP_ICONS).reduce(
    (apps, app) => ({
        ...apps,
        [app]: [16, 32, 48],
    }),
    {} as Record<string, number[]>
);
export type AppIconName = keyof typeof APP_ICONS;

/**
 * App icons are visual representation of an app. They communicate visually to users the jobs that the app will help them with.
 *
 * @type atom
 * @status live
 * @tags visuals
 */
export const AppIcon: FC<AppIconProps> = ({ app, size = 48, className, testId }) => {
    const appIcons: Record<string, FC<IconProps>> = APP_ICONS;
    const props = { size, className, ['data-testid']: testId };
    if (!app) {
        const Icon = appIcons[PLACEHOLDER];
        return <Icon {...props} />;
    }

    if (appIcons[app]) {
        const Icon = appIcons[app];
        return <Icon {...props} />;
    }

    const appName = app
        .toLowerCase()
        .replace(APP_SUFFIX, '')
        .replace(APP_PREFIX, '')
        .replace(/_/g, '-');

    let Icon = appIcons[appName];

    if (!Icon) Icon = appIcons[`${APP_PREFIX}${appName}`];

    if (!Icon) Icon = appIcons[PLACEHOLDER];

    return <Icon {...props} />;
};