import React from 'react';
import { useNavigation, useRoute } from '@react-navigation/native';
import HeaderRight from './HeaderRight';
import { useProductFilterCountryCodes } from '../../../hooks/useEntityFilterCountryCodes';
import useProductMetadata from '../../../hooks/useProductMetadata';
import {
    PRODUCT_FILTER_MODAL,
    PRODUCT_SCREEN
} from '../../../constants/screens';

interface RouteParams {
    upc?: string;
}

const HeaderRightContainer = () => {
    const navigation = useNavigation<any>();
    const route = useRoute();
    const params = route?.params as RouteParams | undefined;
    const upc = params?.upc ?? '';
    const {
        countryCodes,
        loading: defaultsLoading,
        enabled
    } = useProductFilterCountryCodes(upc);

    const { loading: metadataLoading, error: metadataError } =
        useProductMetadata({ upc });

    const handleFilterPress = () => {
        navigation.navigate(PRODUCT_FILTER_MODAL, {
            id: upc,
            referrer: PRODUCT_SCREEN
        });
    };

    const loading = metadataLoading || defaultsLoading;

    if (loading || metadataError || !enabled) {
        return null;
    }

    return (
        <HeaderRight
            onFilterPress={handleFilterPress}
            countryCodes={countryCodes}
            filterCount={countryCodes.length}
        />
    );
};

export default HeaderRightContainer;