import React from 'react';
import { getCountryName } from '@theorchard/countries';
import cx from 'classnames';
import { CDN_MANIFEST, CdnAsset } from '../cdnAsset';
import { COUNTRY_GLOBAL, SMALL_SIZE, WORLD_WIDE } from './constants';
import type { CdnAssetProps, Manifest } from '../cdnAsset';

export type CountryFlagIcons = Manifest['countries'];

export interface CountryFlagIconProps<
    Name extends keyof CountryFlagIcons,
    Size extends keyof CountryFlagIcons[Name],
> extends Omit<
        CdnAssetProps<'countries', Name, Size, never>,
        'category' | 'name' | 'size' | 'variant' | 'height' | 'width'
    > {
    countryCode: string;
    size?: 16 | 24;
    showTitle?: boolean;
}

const resolveCountryCode = (code?: string): keyof CountryFlagIcons => {
    const normalizedCode = code?.toUpperCase();
    if (!normalizedCode || normalizedCode === 'UNKNOWN') return 'UNKNOWN';
    if ([WORLD_WIDE, COUNTRY_GLOBAL].includes(normalizedCode)) return WORLD_WIDE;
    if (!Object.keys(CDN_MANIFEST.countries).includes(normalizedCode)) return 'MISSING';

    return normalizedCode as keyof CountryFlagIcons;
};

const resolveCountryName = (code: string): string => {
    if (code === 'WW') return 'Worldwide';
    if (code === 'UNKNOWN' || code === 'MISSING') return code[0] + code.slice(1).toLowerCase();

    return getCountryName(code);
};

/**
 * Country flags glyphs are used to represent countries. They're used in various components such as dropdowns or tables.
 *
 * @type atom
 * @status live
 * @tags visuals
 */
export function CountryFlag<
    Name extends keyof CountryFlagIcons,
    Size extends keyof CountryFlagIcons[Name],
>({
    size = SMALL_SIZE,
    countryCode,
    testId,
    className,
    showTitle = true,
    ...rest
}: CountryFlagIconProps<Name, Size>) {
    const resolvedCountryCode = resolveCountryCode(countryCode);

    const iconClassName = `${resolvedCountryCode}-CountryFlag`;
    const title = resolveCountryName(resolvedCountryCode);

    return (
        <CdnAsset
            {...rest}
            name={resolvedCountryCode as Name}
            className={cx('Icon CountryFlag', iconClassName, className)}
            testId={testId ?? iconClassName}
            title={showTitle ? title : ''}
            alt={title}
            size={size as Size}
            category="countries"
        />
    );
}