text: // Licensed under the Apache License, Version 2.0 (the "License"); you may not
  // use this file except in compliance with the License. You may obtain a copy of
  // the License at
  //
  //   http://www.apache.org/licenses/LICENSE-2.0
  //
  // Unless required by applicable law or agreed to in writing, software
  // distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  // License for the specific language governing permissions and limitations under
  // the License.
  
  import React from 'react';
  import Constants from '../constants';
  import { Button, ButtonGroup } from 'react-bootstrap';
  
  export default class BulkDocumentHeaderController extends React.Component {
    constructor (props) {
      super(props);
    }
  
    render () {
      const {
        selectedLayout,
        docType,
        queryOptionsParams
      } = this.props;
  
      let metadata, json, table;
      if ((docType === Constants.INDEX_RESULTS_DOC_TYPE.VIEW)) {
        metadata = <Button
            className={selectedLayout === Constants.LAYOUT_ORIENTATION.METADATA ? 'active' : ''}
            onClick={this.toggleLayout.bind(this, Constants.LAYOUT_ORIENTATION.METADATA)}
          >
            Metadata
          </Button>;
      } else if ((docType === Constants.INDEX_RESULTS_DOC_TYPE.MANGO_INDEX)) {
        return null;
      }
  
      // reduce doesn't allow for include_docs=true, so we'll prevent JSON and table
      // views since they force include_docs=true when reduce is checked in the
      // query options panel.
      if (!queryOptionsParams.reduce) {
        table = <Button
            className={selectedLayout === Constants.LAYOUT_ORIENTATION.TABLE ? 'active' : ''}
            onClick={this.toggleLayout.bind(this, Constants.LAYOUT_ORIENTATION.TABLE)}
          >
            <i className="fonticon-table" /> Table
          </Button>;
  
        json = <Button
            className={selectedLayout === Constants.LAYOUT_ORIENTATION.JSON ? 'active' : ''}
            onClick={this.toggleLayout.bind(this, Constants.LAYOUT_ORIENTATION.JSON)}
          >
            <i className="fonticon-json" /> JSON
          </Button>;
      }
  
      return (
        <div className="alternative-header">
          <ButtonGroup className="two-sides-toggle-button">
            {table}
            {metadata}
            {json}
          </ButtonGroup>
        </div>
      );
    }
  
    toggleLayout (newLayout) {
      const {
        changeLayout,
        selectedLayout,
        fetchDocs,
        fetchParams,
        queryOptionsParams,
        queryOptionsToggleIncludeDocs
      } = this.props;
  
      if (newLayout !== selectedLayout) {
        // change our layout to JSON, Table, or Metadata
        changeLayout(newLayout);
  
        queryOptionsParams.include_docs = newLayout !== Constants.LAYOUT_ORIENTATION.METADATA;
        if (newLayout === Constants.LAYOUT_ORIENTATION.TABLE) {
          fetchParams.conflicts = true;
        } else {
          delete fetchParams.conflicts;
        }
  
        // tell the query options panel we're updating include_docs
        queryOptionsToggleIncludeDocs(!queryOptionsParams.include_docs);
        fetchDocs(fetchParams, queryOptionsParams);
        return;
      }
    }
  };
  