import React from 'react';
import type { ReactiveVar } from '@apollo/client';
import EntityCountryFilterModal from './EntityCountryFilterModal';
import useCountryFilterModal from '../../hooks/useCountryFilterModal';
import { getCurrentLanguage } from '../../i18n';
import type { CountryFiltersMap } from '../../apollo/reactive-vars/entity-country-filters';

interface Props {
    reactiveVar: ReactiveVar<CountryFiltersMap>;
    analyticsCountryPressEvent: string;
    analyticsApplyEvent: string;
    analyticsApplyScreen: string;
    title?: string;
}

const EntityCountryFilterModalContainer = ({
    reactiveVar,
    analyticsCountryPressEvent,
    analyticsApplyEvent,
    analyticsApplyScreen,
    title
}: Props) => {
    const language = getCurrentLanguage();
    const {
        countriesFiltersLocalParams,
        handleCountryPress,
        handleApply,
        handleReset,
        isFiltersChanged,
        isFiltersEqualToDefaults
    } = useCountryFilterModal({
        reactiveVar,
        analyticsCountryPressEvent,
        analyticsApplyEvent,
        analyticsApplyScreen
    });

    return (
        <EntityCountryFilterModal
            onApply={handleApply}
            onReset={handleReset}
            onBack={handleApply}
            language={language}
            onCountryPress={handleCountryPress}
            isFiltersChanged={isFiltersChanged}
            isFiltersEqualToDefaults={isFiltersEqualToDefaults}
            countriesFiltersLocalParams={countriesFiltersLocalParams}
            title={title}
        />
    );
};

export default EntityCountryFilterModalContainer;