import type { FC } from 'react';
import React, { memo } from 'react';
import { View } from 'react-native';
// @ts-ignore
import Flag from 'react-native-flags';
import themedStyles from './styles';
import ZeroState from '../../components/ZeroState';
import NoResultsPlaylist from '../Icons/NoResultsPlaylist';
import { formatMessage } from '../../i18n';
import ActionButton from '../../components/Buttons/ActionButton';
import FilterToggle from '../../components/FilterToggle';
import { useTheme } from '../../branding';

interface ZeroStateComponentProps {
    zeroStateTitleKey: string;
    zeroStateMessageKey: string;
    onResetFilters: () => void;
    filterCount: number;
    onFilterPress: () => void;
    showCountryFlag: boolean;
    countries: string[];
}

export const ZeroStateComponent: FC<ZeroStateComponentProps> = ({
    zeroStateTitleKey,
    zeroStateMessageKey,
    onResetFilters,
    filterCount,
    onFilterPress,
    showCountryFlag,
    countries
}) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];

    return (
        <>
            <View style={styles.header}>
                <FilterToggle
                    filterCount={filterCount}
                    active={true}
                    onPress={onFilterPress}
                    icon={
                        showCountryFlag && countries.length > 0 ? (
                            <Flag
                                style={styles.countryFlag}
                                code={countries[0]}
                                size={64}
                            />
                        ) : null
                    }
                />
            </View>
            <ZeroState
                style={styles.zeroStateContainer}
                hasError={false}
                isOffline={false}
                hasAccess={true}
                icon={<NoResultsPlaylist />}
                title={formatMessage(zeroStateTitleKey)}
                message={formatMessage(zeroStateMessageKey)}
                messageStyle={styles.message}
            >
                <ActionButton
                    testID="reset"
                    title={formatMessage('filtering.reset')}
                    onPress={onResetFilters}
                    style={styles.resetFilters}
                />
            </ZeroState>
        </>
    );
};

export default memo(ZeroStateComponent);