import React, { useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import { is } from 'ramda';
/**
 * The FavIcon component sets the favicon displayed by the browser on the website's tab
 * The html <link> of the icon must have an id attribute of 'favicon'
 */
const FavIcon = ({ favIconSource, defaultFavIcon }) => {
    const onError = useCallback((event, favicon) => {
        favicon.href = defaultFavIcon || '#';
        if (is(String, event))
            return;
        const target = event.target;
        target.onerror = null;
    }, [defaultFavIcon]);
    const setFavIcon = useCallback((source) => {
        const favicon = document.getElementById('favicon') || top.document.getElementById('favicon');
        const img = new Image();
        img.onerror = (event) => onError(event, favicon);
        img.onload = () => (favicon.href = source || '#');
        img.src = source;
    }, [onError]);
    useEffect(() => {
        setFavIcon(favIconSource);
    }, [favIconSource, setFavIcon]);
    return React.createElement(React.Fragment, null);
};
FavIcon.propTypes = {
    /**
     * URL of the favicon image
    */
    favIconSource: PropTypes.string,
    /**
     * URL of the fallback image. This will be used when the onerror event occurs
    */
    defaultFavIcon: PropTypes.string
};
export default FavIcon;
//# sourceMappingURL=FavIcon.js.map