content: import React from 'react';
  import PropTypes from 'prop-types';
  import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
  import Icon from 'mastodon/components/icon';
  
  const tooltips = defineMessages({
    mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
    favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favourites' },
    boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
    polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
    follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
    statuses: { id: 'notifications.filter.statuses', defaultMessage: 'Updates from people you follow' },
  });
  
  export default @injectIntl
  class FilterBar extends React.PureComponent {
  
    static propTypes = {
      selectFilter: PropTypes.func.isRequired,
      selectedFilter: PropTypes.string.isRequired,
      advancedMode: PropTypes.bool.isRequired,
      intl: PropTypes.object.isRequired,
    };
  
    onClick (notificationType) {
      return () => this.props.selectFilter(notificationType);
    }
  
    render () {
      const { selectedFilter, advancedMode, intl } = this.props;
      const renderedElement = !advancedMode ? (
        <div className='notification__filter-bar'>
          <button
            className={selectedFilter === 'all' ? 'active' : ''}
            onClick={this.onClick('all')}
          >
            <FormattedMessage
              id='notifications.filter.all'
              defaultMessage='All'
            />
          </button>
          <button
            className={selectedFilter === 'mention' ? 'active' : ''}
            onClick={this.onClick('mention')}
          >
            <FormattedMessage
              id='notifications.filter.mentions'
              defaultMessage='Mentions'
            />
          </button>
        </div>
      ) : (
        <div className='notification__filter-bar'>
          <button
            className={selectedFilter === 'all' ? 'active' : ''}
            onClick={this.onClick('all')}
          >
            <FormattedMessage
              id='notifications.filter.all'
              defaultMessage='All'
            />
          </button>
          <button
            className={selectedFilter === 'mention' ? 'active' : ''}
            onClick={this.onClick('mention')}
            title={intl.formatMessage(tooltips.mentions)}
          >
            <Icon id='reply-all' fixedWidth />
          </button>
          <button
            className={selectedFilter === 'favourite' ? 'active' : ''}
            onClick={this.onClick('favourite')}
            title={intl.formatMessage(tooltips.favourites)}
          >
            <Icon id='star' fixedWidth />
          </button>
          <button
            className={selectedFilter === 'reblog' ? 'active' : ''}
            onClick={this.onClick('reblog')}
            title={intl.formatMessage(tooltips.boosts)}
          >
            <Icon id='retweet' fixedWidth />
          </button>
          <button
            className={selectedFilter === 'poll' ? 'active' : ''}
            onClick={this.onClick('poll')}
            title={intl.formatMessage(tooltips.polls)}
          >
            <Icon id='tasks' fixedWidth />
          </button>
          <button
            className={selectedFilter === 'status' ? 'active' : ''}
            onClick={this.onClick('status')}
            title={intl.formatMessage(tooltips.statuses)}
          >
            <Icon id='home' fixedWidth />
          </button>
          <button
            className={selectedFilter === 'follow' ? 'active' : ''}
            onClick={this.onClick('follow')}
            title={intl.formatMessage(tooltips.follows)}
          >
            <Icon id='user-plus' fixedWidth />
          </button>
        </div>
      );
      return renderedElement;
    }
  
  }
  