import React from 'react';
import { Image } from 'react-native';
import CountryFlag from 'react-native-country-flag';
import { safeWithTheme, useTheme } from '../../branding';
import { brandByValue } from '../../componentsDS/BrandFilters/constants';
import { storeById } from '../../modals/MyCatalogBottomSheetFilter/constants';
import StoreIcon from '../Icons/StoreIcon/StoreIcon';
import { FLAG_SIZE, LOGO_SIZE } from './constants';
import themedStyles from './styles';
import type { SummarySegmentIcon } from './types';

interface SegmentIconProps {
    icon?: SummarySegmentIcon;
}

const SegmentIcon: React.FC<SegmentIconProps> = ({ icon }) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];

    if (!icon) {
        return null;
    }

    if (icon.type === 'flag') {
        return <CountryFlag isoCode={icon.countryCode} size={FLAG_SIZE} />;
    }

    if (icon.type === 'artist') {
        return <Image source={{ uri: icon.imageUrl }} style={styles.avatar} />;
    }

    if (icon.type === 'store') {
        const store = storeById[icon.storeId];
        return store ? (
            <StoreIcon storeName={store.storeName} size="small" />
        ) : null;
    }

    if (icon.type === 'brand') {
        const BrandIcon = brandByValue[icon.brandValue]?.icon;
        return BrandIcon ? (
            <BrandIcon width={LOGO_SIZE} height={LOGO_SIZE} />
        ) : null;
    }

    return null;
};

export default safeWithTheme(SegmentIcon);