import React, { useState } from 'react';
import { Alert } from '@orchard/frontend-react-components';
import { withRouter } from 'react-router-dom';
import { formatMessage } from 'src/utils';
import type { RouteComponentProps } from 'react-router-dom';

export const PERMITTED_PATH_NAMES_APPLE_SOURCE_REMOVAL = [
    '/analytics/audience',
];

const AppleInfoAlert: React.FC<RouteComponentProps> = ({ location }) => {
    const [bannerDismissed, setBannerDismissed] = useState(false);
    const { pathname } = location;

    if (
        !PERMITTED_PATH_NAMES_APPLE_SOURCE_REMOVAL.includes(pathname) ||
        Date.now() > Date.UTC(2021, 4, 1) ||
        bannerDismissed
    )
        return null;

    return (
        <div className="container-max-1170">
            <Alert
                variant={Alert.VARIANT_INFO}
                dismissible
                onDismiss={() => setBannerDismissed(true)}
            >
                <div>{formatMessage('appleAlert')}</div>
            </Alert>
        </div>
    );
};

export default withRouter(AppleInfoAlert);