import React from 'react';
import { isEqual } from 'lodash';
import { Text, View } from 'react-native';
import { withTheme } from '../../branding';
import styles from './styles';
import FilterItem from '../../components/FilterItem';
import { brandFilterItems } from './constants';
import {
    SONY_MUSIC,
    AWAL,
    THE_ORCHARD,
    FOUNDATION_MEDIA
} from '../../constants/sources';

export type ThemeModeType = 'light' | 'dark';

interface Brand {
    name: string;
    value: string;
    icon?: React.ComponentType<any>;
}

interface BrandFiltersProps {
    theme: ThemeModeType;
    onFilterSelect: (brand: Brand) => void;
    selectedFilters: Brand[];
    hasSMEData?: boolean;
    hasFoundationMedia?: boolean;
}

export const getFilteredBrandItems = (
    key: string,
    hasFoundationMedia: boolean | undefined
): Brand[] =>
    key === SONY_MUSIC && !hasFoundationMedia
        ? brandFilterItems[key].filter(
              (brand: Brand) => brand.name !== FOUNDATION_MEDIA
          )
        : brandFilterItems[key];

export const BrandFilters: React.FC<BrandFiltersProps> = ({
    theme,
    onFilterSelect,
    selectedFilters,
    hasSMEData,
    hasFoundationMedia
}) => {
    const themeStyles = styles[theme];

    const renderFilterBlock = (key: string) => (
        <React.Fragment key={key}>
            <Text style={themeStyles.sectionTitle}>{key.toUpperCase()}</Text>
            <View style={themeStyles.filterItemsContainer}>
                {getFilteredBrandItems(key, hasFoundationMedia).map(
                    (brand: Brand) => (
                        <FilterItem
                            text={brand.name}
                            key={brand.value}
                            selected={Boolean(
                                selectedFilters.find(filter =>
                                    isEqual(filter, brand)
                                )
                            )}
                            Icon={brand.icon}
                            onSelect={() => onFilterSelect(brand)}
                        />
                    )
                )}
            </View>
        </React.Fragment>
    );

    return (
        <View style={themeStyles.container}>
            {hasSMEData && renderFilterBlock(SONY_MUSIC)}
            {!hasSMEData && renderFilterBlock(AWAL)}
            {renderFilterBlock(THE_ORCHARD)}
        </View>
    );
};

export default withTheme(BrandFilters);