text: // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
  // See LICENSE.txt for license information.
  
  import PropTypes from 'prop-types';
  import React from 'react';
  import {FormattedMessage} from 'react-intl';
  import {OverlayTrigger, Tooltip} from 'react-bootstrap';
  
  import {localizeMessage} from 'utils/utils.jsx';
  import {Constants} from 'utils/constants';
  import {t} from 'utils/i18n';
  
  export default function HeaderIconWrapper({
      iconComponent,
      ariaLabel,
      buttonClass,
      buttonId,
      onClick,
      tooltipKey,
      tooltipText,
  }) {
      const toolTips = {
          flaggedPosts: {
              class: 'text-nowrap',
              id: 'flaggedTooltip',
              messageID: t('channel_header.flagged'),
              message: 'Flagged Posts',
          },
          pinnedPosts: {
              class: '',
              id: 'pinnedPostTooltip',
              messageID: t('channel_header.pinnedPosts'),
              message: 'Pinned Posts',
          },
          recentMentions: {
              class: '',
              id: 'recentMentionsTooltip',
              messageID: t('channel_header.recentMentions'),
              message: 'Recent Mentions',
          },
          search: {
              class: '',
              id: 'searchTooltip',
              messageID: t('channel_header.search'),
              message: 'Search',
          },
      };
  
      function getTooltip(key) {
          if (toolTips[key] == null) {
              return null;
          }
  
          return (
              <Tooltip
                  id={toolTips[key].id}
                  className={toolTips[key].class}
              >
                  <FormattedMessage
                      id={toolTips[key].messageID}
                      defaultMessage={toolTips[key].message}
                  />
              </Tooltip>
          );
      }
  
      let tooltip;
      if (tooltipKey === 'plugin' && tooltipText) {
          tooltip = (
              <Tooltip
                  id='pluginTooltip'
                  className=''
              >
                  <span>{tooltipText}</span>
              </Tooltip>
          );
      } else {
          tooltip = getTooltip(tooltipKey);
      }
  
      let ariaLabelText;
      if (ariaLabel) {
          ariaLabelText = `${localizeMessage(toolTips[tooltipKey].messageID, toolTips[tooltipKey].message)}`;
      }
  
      if (tooltip) {
          return (
              <div className='flex-child'>
                  <OverlayTrigger
                      trigger={['hover']}
                      delayShow={Constants.OVERLAY_TIME_DELAY}
                      placement='bottom'
                      overlay={tooltip}
                  >
                      <button
                          id={buttonId}
                          aria-label={ariaLabelText}
                          className={buttonClass || 'channel-header__icon style--none'}
                          onClick={onClick}
                      >
                          {iconComponent}
                      </button>
                  </OverlayTrigger>
              </div>
          );
      }
  
      return (
          <div className='flex-child'>
              <button
                  id={buttonId}
                  className={buttonClass || 'channel-header__icon style--none'}
                  onClick={onClick}
              >
                  {iconComponent}
              </button>
          </div>
      );
  }
  
  HeaderIconWrapper.propTypes = {
      ariaLabel: PropTypes.bool,
      buttonClass: PropTypes.string,
      buttonId: PropTypes.string.isRequired,
      iconComponent: PropTypes.element.isRequired,
      onClick: PropTypes.func.isRequired,
      tooltipKey: PropTypes.string,
      tooltipText: PropTypes.string,
  };
  