text: import React, { Component, PropTypes } from 'react';
  import classnames from 'classnames';
  import { VisibilityFilters } from '../redux/modules/visibilityFilter';
  
  const { SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED } = VisibilityFilters;
  
  const FILTER_TITLES = {
    [SHOW_ALL]: 'All',
    [SHOW_ACTIVE]: 'Active',
    [SHOW_COMPLETED]: 'Completed'
  };
  
  export default class Footer extends Component {
    static propTypes = {
      completedCount: PropTypes.number.isRequired,
      activeCount: PropTypes.number.isRequired,
      filter: PropTypes.string.isRequired,
      onClearCompleted: PropTypes.func.isRequired,
      onShow: PropTypes.func.isRequired
    }
  
    renderTodoCount() {
      const { activeCount } = this.props;
      const itemWord = activeCount === 1 ? 'todo' : 'todos';
  
      return (
        <span className='todo-count'>
          <strong>{ activeCount || 'No' }</strong> { itemWord } left
        </span>
      );
    }
  
    renderFilterLink(filter, name) {
      const title = FILTER_TITLES[filter];
      const { filter: selectedFilter, onShow } = this.props;
  
      return (
        <a
          className={classnames({ selected: filter === selectedFilter })}
          style={{ cursor: 'pointer' }}
          onClick={() => onShow(filter)}
        >
          {title}
        </a>
      );
    }
  
    renderClearButton() {
      const { completedCount, onClearCompleted } = this.props;
  
      if (completedCount > 0) {
        return (
          <button
            className='clear-completed'
            onClick={onClearCompleted}
          >
            Clear completed
          </button>
        );
      }
    }
  
    render() {
      return (
        <footer className='footer'>
          {this.renderTodoCount()}
          <ul className='filters'>
            {[ SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED ].map(filter =>
              <li key={filter}>
                {this.renderFilterLink(filter)}
              </li>
            )}
          </ul>
          {this.renderClearButton()}
        </footer>
      );
    }
  }
  