import React, { useContext } from 'react';
import { IconNotifications } from '@defencedigital/icon-library';
import { Transition } from 'react-transition-group';
import { SidebarContext } from './context';
import { TRANSITION_TIMEOUT } from './constants';
import { StyledNotificationsSheet } from './partials/StyledNotificationsSheet';
import { StyledNotificationsSheetButton } from './partials/StyledNotificationsSheetButton';
import { StyledNotificationDot } from './partials/StyledNotificationDot';
import { StyledNotificationsLabel } from './partials/StyledNotificationsLabel';
export var SidebarNotifications = function SidebarNotifications(_ref) {
  var initialIsOpen = _ref.initialIsOpen,
    notifications = _ref.notifications,
    hasUnreadNotification = _ref.hasUnreadNotification;
  var _useContext = useContext(SidebarContext),
    isOpen = _useContext.isOpen;
  if (!notifications) {
    return null;
  }
  return /*#__PURE__*/React.createElement(StyledNotificationsSheet, {
    "aria-label": "Notifications",
    button: /*#__PURE__*/React.createElement(StyledNotificationsSheetButton, {
      "aria-label": "Show notifications",
      icon: /*#__PURE__*/React.createElement(IconNotifications, null),
      isOpen: isOpen
    }, hasUnreadNotification && /*#__PURE__*/React.createElement(StyledNotificationDot, null, React.Children.count(notifications.props.children)), /*#__PURE__*/React.createElement(Transition, {
      in: isOpen,
      timeout: TRANSITION_TIMEOUT,
      unmountOnExit: true
    }, function (state) {
      return /*#__PURE__*/React.createElement(StyledNotificationsLabel, {
        $transitionStatus: state
      }, "Notifications");
    })),
    initialIsOpen: initialIsOpen,
    placement: "right"
  }, notifications);
};
SidebarNotifications.displayName = 'SidebarNotifications';