content: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import BackButtonDefault from './Buttons/BackButton';
  import UploadButtonDefault from './Buttons/UploadButton';
  import AddFolderButtonDefault from './Buttons/AddFolderButton';
  
  class GalleryToolbar extends Component {
    constructor(props) {
      super(props);
      this.handleSelectSort = this.handleSelectSort.bind(this);
      this.handleViewChange = this.handleViewChange.bind(this);
    }
  
    /**
     * Handler for when the sorter dropdown value is changed
     *
     * @param {Event} event
     */
    handleSelectSort(event) {
      this.props.onSort(event.currentTarget.value);
    }
  
    /**
     * Handles changing the view type when the view button is clicked
     *
     * @param event
     */
    handleViewChange(event) {
      const view = event.currentTarget.value;
  
      this.props.onViewChange(view);
    }
  
    /**
     * Generates the react components needed for the Sorter part of this component
     *
     * @returns {XML}
     */
    renderSort() {
      if (this.props.view !== 'tile') {
        return null;
      }
      return (
        <div className="gallery__sort fieldholder-small">
          <select
            className="dropdown no-change-track no-chzn"
            tabIndex="0"
            style={{ width: '160px' }}
            defaultValue={this.props.sort}
          >
            {this.props.sorters.map((sorter) => (
              <option
                key={`${sorter.field}-${sorter.direction}`}
                onClick={this.handleSelectSort}
                data-field={sorter.field}
                data-direction={sorter.direction}
                value={`${sorter.field},${sorter.direction}`}
              >
                {sorter.label}
              </option>
            ))}
          </select>
        </div>
      );
    }
  
    /**
     * Renders the react component buttons for changing the view that is currently being used
     *
     * @returns {Array} buttons
     */
    renderViewChangeButtons() {
      const views = ['tile', 'table'];
      return views.map((view) => {
        const icon = (view === 'table') ? 'list' : 'thumbnails';
        const classNames = [
          'gallery__view-change-button',
          'btn btn-secondary',
          'btn--icon-sm',
          'btn--no-text',
        ];
  
        if (view === this.props.view) {
          return null;
        }
        classNames.push(`font-icon-${icon}`);
        return (
          <button
            id={`button-view-${view}`}
            key={view}
            className={classNames.join(' ')}
            type="button"
            title="Change view gallery/list"
            onClick={this.handleViewChange}
            value={view}
          />
        );
      });
    }
  
    render() {
      const {
        badges,
        children,
        folder,
        onMoveFiles,
        onOpenFolder,
        onCreateFolder,
        // Button components
        BackButton,
        UploadButton,
        AddFolderButton,
      } = this.props;
  
      const { canEdit } = folder;
  
      return (
        <div className="toolbar--content toolbar--space-save">
          <div className="fill-width">
            <div className="flexbox-area-grow">
              <div className="btn-toolbar">
                <BackButton
                  folder={folder}
                  badges={badges}
                  onOpenFolder={onOpenFolder}
                  onMoveFiles={onMoveFiles}
                />
                <UploadButton
                  canEdit={canEdit}
                />
                <AddFolderButton
                  canEdit={canEdit}
                  onCreateFolder={onCreateFolder}
                />
                {children}
              </div>
            </div>
  
            <div className="gallery__state-buttons">
              {this.renderSort()}
              <div className="btn-group" role="group" aria-label="View mode">
                {this.renderViewChangeButtons()}
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
  
  GalleryToolbar.propTypes = {
    onMoveFiles: PropTypes.func.isRequired,
    onCreateFolder: PropTypes.func.isRequired,
    onViewChange: PropTypes.func.isRequired,
    onOpenFolder: PropTypes.func.isRequired,
    onSort: PropTypes.func.isRequired,
    folder: PropTypes.shape({
      id: PropTypes.number,
      title: PropTypes.string,
      parentId: PropTypes.number,
      canView: PropTypes.bool,
      canEdit: PropTypes.bool,
    }).isRequired,
    view: PropTypes.oneOf(['tile', 'table']),
    sort: PropTypes.string,
    badges: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.number,
      message: PropTypes.node,
      status: PropTypes.string,
    })),
    BackButton: PropTypes.func,
    UploadButton: PropTypes.func,
    AddFolderButton: PropTypes.func,
  };
  
  GalleryToolbar.defaultProps = {
    view: 'tile',
    BackButton: BackButtonDefault,
    UploadButton: UploadButtonDefault,
    AddFolderButton: AddFolderButtonDefault,
  };
  
  function mapStateToProps(state, ownProps) {
    let { sort } = ownProps;
  
    const {
      badges,
      sorters,
    } = state.assetAdmin.gallery;
  
    // set default sort
    if (sort === '') {
      sort = `${sorters[0].field},${sorters[0].direction}`;
    }
    return { badges, sorters, sort };
  }
  
  export {
    GalleryToolbar as Component,
  };
  
  export default connect(mapStateToProps)(GalleryToolbar);
  