import type { JSX } from 'react';
import React from 'react';
import type { ViewStyle } from 'react-native';
import { View } from 'react-native';
import SpotifyIcon from './SpotifyIcon';
import AppleIcon from './AppleIcon';
import AmazonIcon from './AmazonIcon';
import DeezerIcon from './DeezerIcon';
import GooglePlayIcon from './GooglePlayIcon';
import PandoraIcon from './PandoraIcon';
import NapsterIcon from './NapsterIcon';
import InstagramIcon from './InstagramIcon';
import KuwoIcon from './KuwoIcon';
import KugouIcon from './KugouIcon';
import SoundCloudIcon from './SoundCloudIcon';
import QQIcon from './QQIcon';
import LineJapanIcon from './LineJapanIcon';
import TikTokIcon from './TikTokIcon';
import WynkIcon from './WynkIcon';
import AwaIcon from './AwaIcon';
import BeatportIcon from './BeatportIcon';
import YouTubeIcon from './YouTubeIcon';
import {
    AMAZON,
    APPLE,
    DEEZER,
    SPOTIFY,
    GOOGLE,
    YOUTUBE,
    LINE_JAPAN,
    SOUNDCLOUD,
    TIKTOK,
    AWA,
    QQ,
    KUGOU,
    KUWO,
    PANDORA,
    NAPSTER,
    BEATPORT
} from '../../../constants/sources';
import {
    STORE_AMAZON_MUSIC,
    STORE_APPLE_MUSIC,
    STORE_AWA,
    STORE_BEATPORT,
    STORE_DEEZER,
    STORE_GOOGLE_PLAY,
    STORE_INSTAGRAM,
    STORE_KUGOU,
    STORE_KUWO,
    STORE_LINE_JAPAN,
    STORE_NAPSTER,
    STORE_PANDORA,
    STORE_QQ,
    STORE_SOUNDCLOUD,
    STORE_SPOTIFY,
    STORE_TIKTOK,
    STORE_WYNK,
    STORE_YOUTUBE
} from '../../../constants/social-platforms';
import { STORE_ICON_SIZE } from './constants';

export type StoreIconSizeType = 'small' | 'medium' | 'large';

interface StoreIconsProps {
    [key: string]: JSX.Element;
}

interface StoreIconProps {
    size?: StoreIconSizeType;
    source?: {
        id?: string;
        storeId?: string;
    };
    storeName?: string;
    style?: ViewStyle | ViewStyle[];
}

export const getIconSize = (size: StoreIconSizeType) => {
    switch (size) {
        case STORE_ICON_SIZE.SMALL: {
            return { height: 16, width: 16 };
        }
        case STORE_ICON_SIZE.MEDIUM: {
            return { height: 18, width: 18 };
        }
        case STORE_ICON_SIZE.LARGE: {
            return { height: 24, width: 24 };
        }
        default: {
            return { height: 24, width: 24 };
        }
    }
};

const getStoreIcon = (
    sourceId?: string,
    storeName?: string,
    size: StoreIconSizeType = 'small'
) => {
    if (sourceId) {
        const storeIcons: StoreIconsProps = {
            [SPOTIFY]: <SpotifyIcon size={size} />,
            [APPLE]: <AppleIcon size={size} />,
            [AMAZON]: <AmazonIcon size={size} />,
            [DEEZER]: <DeezerIcon size={size} />,
            [YOUTUBE]: <YouTubeIcon size={size} />,
            [GOOGLE]: <GooglePlayIcon size={size} />,
            [LINE_JAPAN]: <LineJapanIcon size={size} />,
            [SOUNDCLOUD]: <SoundCloudIcon size={size} />,
            [TIKTOK]: <TikTokIcon size={size} />,
            [AWA]: <AwaIcon size={size} />,
            [QQ]: <QQIcon size={size} />,
            [KUGOU]: <KugouIcon size={size} />,
            [KUWO]: <KuwoIcon size={size} />,
            [PANDORA]: <PandoraIcon size={size} />,
            [NAPSTER]: <NapsterIcon size={size} />,
            [BEATPORT]: <BeatportIcon size={size} />
        };

        return storeIcons[sourceId] || null;
    }
    if (storeName) {
        const storeIcons: StoreIconsProps = {
            [STORE_SPOTIFY]: <SpotifyIcon size={size} />,
            [STORE_APPLE_MUSIC]: <AppleIcon size={size} />,
            [STORE_AMAZON_MUSIC]: <AmazonIcon size={size} />,
            [STORE_DEEZER]: <DeezerIcon size={size} />,
            [STORE_YOUTUBE]: <YouTubeIcon size={size} />,
            [STORE_GOOGLE_PLAY]: <GooglePlayIcon size={size} />,
            [STORE_LINE_JAPAN]: <LineJapanIcon size={size} />,
            [STORE_SOUNDCLOUD]: <SoundCloudIcon size={size} />,
            [STORE_INSTAGRAM]: <InstagramIcon size={size} />,
            [STORE_TIKTOK]: <TikTokIcon size={size} />,
            [STORE_AWA]: <AwaIcon size={size} />,
            [STORE_WYNK]: <WynkIcon size={size} />,
            [STORE_QQ]: <QQIcon size={size} />,
            [STORE_KUGOU]: <KugouIcon size={size} />,
            [STORE_KUWO]: <KuwoIcon size={size} />,
            [STORE_PANDORA]: <PandoraIcon size={size} />,
            [STORE_NAPSTER]: <NapsterIcon size={size} />,
            [STORE_BEATPORT]: <BeatportIcon size={size} />
        };

        return storeIcons[storeName] || null;
    }
    return <SpotifyIcon size={size} />;
};

const StoreIcon = ({
    size = 'small',
    source = undefined,
    storeName = undefined,
    style = undefined
}: StoreIconProps) => {
    const { id, storeId } = source || {};
    const sourceId = id || storeId;
    return (
        <View testID="storeIcon" style={style}>
            {getStoreIcon(sourceId, storeName, size)}
        </View>
    );
};

export default StoreIcon;