import React, { useEffect, useState } from 'react';
import { LayoutAnimation, View, Text } from 'react-native';
import Flag from 'react-native-flags';
import type { Animated, StyleProp, ViewStyle } from 'react-native';
import TouchableOpacity from '../TouchableOpacity';
import FilterIcon from '../Icons/FilterIcon';
import { safeWithTheme } from '../../branding';
import type { ThemeProps } from '../../branding/hoc/types';
import styles, { type Styles } from './styles';

interface Props {
    onPress: () => void;
    style?: StyleProp<ViewStyle>;
    filterCount: number;
    countryCodes: string[];
    testID?: string;
    opacity?: Animated.Value;
}

const useFlagVisibility = (opacity?: Animated.Value) => {
    const [flagVisible, setFlagVisible] = useState(true);
    useEffect(() => {
        if (!opacity) {
            return;
        }
        const opacityListener = opacity.addListener(({ value }) => {
            LayoutAnimation.configureNext(
                LayoutAnimation.Presets.easeInEaseOut
            );
            setFlagVisible(value <= 0);
        });
        return () => {
            opacity.removeListener(opacityListener);
        };
    }, [opacity]);
    return flagVisible;
};

const EntityCountryFilterToggle = ({
    onPress,
    style,
    filterCount,
    countryCodes,
    testID,
    opacity,
    theme,
    colors,
    typography
}: Props & ThemeProps) => {
    const themeStyles = styles[theme] as unknown as Styles;
    const flagVisible = useFlagVisibility(opacity);
    const active = filterCount > 0;
    const hasMultipleFilters = filterCount > 1;
    const showSingleFlag = filterCount === 1;

    return (
        <TouchableOpacity
            style={[
                themeStyles.container,
                active ? themeStyles.buttonActive : themeStyles.buttonInactive,
                style
            ]}
            onPress={onPress}
            testID={testID}
        >
            {showSingleFlag && flagVisible ? (
                <View testID="icon" style={themeStyles.icon}>
                    <Flag
                        style={themeStyles.countryFlag}
                        code={countryCodes[0]}
                        size={64}
                    />
                </View>
            ) : null}
            {hasMultipleFilters ? (
                <Text
                    testID="filterCount"
                    style={[typography.subheading, themeStyles.subHeading]}
                >
                    {filterCount}
                </Text>
            ) : null}

            <FilterIcon color={active ? colors.midnight850 : colors.gray0} />
        </TouchableOpacity>
    );
};

export default safeWithTheme(EntityCountryFilterToggle);