// @flow
import React from 'react';
import * as ICONS from 'constants/icons';
import useBrowserNotifications from '$web/component/browserNotificationSettings/use-browser-notifications';
import 'scss/component/notifications-banner.scss';
import Icon from 'component/common/icon';
import Button from 'component/button';
import usePersistedState from 'effects/use-persisted-state';

export const BrowserNotificationBanner = () => {
  const { pushSupported, pushEnabled, pushPermission, pushToggle, pushErrorModal } = useBrowserNotifications();
  const [hasAcknowledgedPush, setHasAcknowledgedPush] = usePersistedState('push-nag', false);

  if (!pushSupported || pushEnabled || pushPermission === 'denied' || hasAcknowledgedPush) return null;

  const handleClose = () => setHasAcknowledgedPush(true);

  return (
    <>
      <div className="browserNotificationsBanner notice-message">
        <div className="browserNotificationsBanner__overview">
          <Icon className="browserNotificationsBanner__icon" icon={ICONS.NOTIFICATION} size={32} />
          <p>
            <strong>{__('Realtime push notifications straight to your browser.')}</strong>
            <br />
            <span className="notificationsBlocked__subText">{__("Don't miss another notification again.")}</span>
          </p>
        </div>
        <div className="browserNotificationsBanner__actions">
          <Button
            className="browserNotificationsBanner__button"
            button="primary"
            title={__('Enable Push Notifications')}
            label={__('Enable Push Notifications')}
            onClick={pushToggle}
          />
          <Button button="close" title={__('Dismiss')} icon={ICONS.REMOVE} onClick={handleClose} />
        </div>
      </div>
      {pushErrorModal()}
    </>
  );
};

export default BrowserNotificationBanner;